No debería "text-align: center;" aplicado a un elemento absolutamente posicionado, ¿no hacer nada con sus elementos secundarios?

Question

Yo te dejaré ver el código primero y luego le dice cuál es mi problema:

Tinkerbin: http://tinkerbin.com/x8iGCFsZ

<style> 
    div.container{ 
    height: 200px; 
    width: 200px; 
    background-color:red; 
    margin-top: 10px; 
    } 

    div.subContainer{ 
    position: relative; 
    text-align: center; 
    } 

    div.inner{ 
    position: absolute; 
    background-color:yellow; 
    width: 150px; 
    } 
</style> 

<div class="container"> 
    <div class="subContainer"> 
    <div class="inner">bananas for breakfast</div> 
    </div> 
</div> 

Así, de acuerdo con el libro de texto, text-align: center;, cuando se aplica a un elemento padre , solo centra sus elementos secundarios si tienen display: inline;.

Por lo tanto, y como era de esperar, ya que un <div> tiene por el conjunto de visualización por defecto para bloquear (display:block;) la text-align: center; aplica al padre div.subContainer no hacer nada a su hijo div.inner.

Todo bien hasta ahora. Nada raro

Mi problema despierta cuando intento usar <span>, en lugar de <div> en el elemento .inner, y la posición absolutamente (position: absolute;) — que, como usted sabe la fuerza cambia la pantalla, desde su línea por omisión, para bloquear.

Echale un vistazo:

<style> 
    div.container{ 
    height: 200px; 
    width: 200px; 
    background-color:red; 
    margin-top: 10px; 
    } 

    div.subContainer{ 
    position: relative; 
    text-align: center; 
    } 

    span.inner{ 
    position: absolute; 
    background-color:yellow; 
    width: 150px; 
    } 
</style> 

<div class="container"> 
    <div class="subContainer"> 
    <span class="inner">bananas for breakfast</span> 
    </div> 
</div> 

Lo que pasa es raro. A pesar de tener el valor de visualización forzado del bloque (gracias al position: absolute;) el tramo sigue centrado. Y aún más, el centrado es realmente extraño. Toma el lado izquierdo del bloque y lo alinea con el centro del elemento contenedor, en lugar de, como de costumbre, alineando ambos centros.

El comportamiento es — fijo comienza a actuar como un bloque — cuando configuro manualmente la pantalla en el span.inner para bloquear.

span.inner{ 
    position: absolute; 
    display: block; 
    background-color:yellow; 
    width: 150px; 
} 

Entonces, ¿qué está pasando aquí? ¿El posicionamiento absoluto no obliga a cambiar la pantalla para bloquear? ¿Por qué el centrado es raro?

Answer 1

Cuando lo configura en position: absolute, se convierte en un bloque, pero se elimina del flujo de contenido en el punto donde originalmente habría aparecido. Como no está utilizando top, left, bottom y right, esto es mucho más notable.

Al usar un <div>: una división, por defecto, es de nivel de bloque y ocupará todo el ancho posible. Por lo tanto, de forma predeterminada, comenzaría en el lado izquierdo del cuadro y se expandiría hacia la derecha. Al posicionarlo de manera absoluta, lo mantendría en la esquina superior izquierda donde aparecía originalmente, la única diferencia notable es el ancho de la caja.

Cuando se utiliza un <span>: Un lapso, por defecto, es un elemento en línea que se ve afectada por la propiedad text-align de que es padre.El cursor de texto comienza en el centro del elemento y, a medida que se ingresa el texto, los caracteres se agregan y se vuelven a centrar para ajustarse al ancho del texto. Cuando quita el tramo del flujo, comienza en el punto donde el texto habría comenzado. El cursor de texto está en el centro mismo (horizontalmente) del elemento, ya que ahora no hay texto en el elemento primario real.

ya has encontrado la solución: añadiendo display: block forzará el elemento a ser en realidad un elemento en bloque. El problema es que solo porque position: absolute "fuerza" esta propiedad, no es una propiedad real, solo un valor calculado para el elemento. Dicho esto, solo se aplica a la posición del elemento cuando se establece explícitamente en sus definiciones de CSS.