La alineación vertical no funciona en el bloque en línea

Me dijeron que:

La alineación vertical solo funciona para elementos en línea, bloques en línea, imágenes y tablas.
Tiene que ser aplicado en el elemento hijo, como opuesto al elemento padre, a diferencia de text-align.

Sin embargo, cuando traté de establecer el alineamiento vertical medio en un elemento de bloque en línea, no funcionó. ¿Por qué?

#wrapper { border: 1px solid black; width: 500px; height: 500px; } #content { border: 1px solid black; display: inline-block; vertical-align: middle; } 
 
content

No funciona porque vertical-align establece la alineación de los contenidos de nivel en línea con respecto a su cuadro de línea, no su bloque contenedor:

Esta propiedad afecta el posicionamiento vertical dentro de un recuadro de líneas de los recuadros generados por un elemento de nivel en línea.

Un cuadro de línea es

El área rectangular que contiene los cuadros que forman una línea

Cuando ve un texto que tiene varias líneas, cada una es un cuadro de línea. Por ejemplo, si tiene

 p { border: 3px solid; width: 350px; height: 200px; line-height: 28px; padding: 15px; } 
 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.

Vertical-align en línea / elemento de bloque en línea, imágenes, texto … alinear elemento juntos, no con padres.

Ejemplo de uso: alinee la imagen sonriente en un texto

puedes hacer trampas agregando un pseudo-elemento de 0px de ancho, 100% de altura

 #wrapper { border: 1px solid black; width: 200px; height: 200px; vertical-align: middle; } #wrapper:after{ content: ''; display: inline-block; width: 0px; height: 100%; vertical-align: middle; } #content { border: 1px solid black; display: inline-block; vertical-align: middle; } 
 
content

Funciona para mí usando vertical-align: text-top;

 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
Lorem ipsum dolor sit amet, diam nonummy nibh
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
.box { display: inline-block; width: 20%; margin: 5px; padding:10px; border-top: 5px solid #000000; vertical-align: text-top; }

jsfiddle

Intereting Posts