CSS tiene una propiedad llamada alineación vertical. Puede resultar un poco confuso la primera vez que lo conoces, así que pensé que podríamos ayudarte a explicar para qué sirve y algunos casos de uso.
El uso básico es así:
img {
vertical-align: middle;
}Observe que en este caso de uso, se está aplicando al img elemento. Las imágenes son elementos naturalmente en línea, lo que significa que se colocan en línea con el texto si pueden. Pero, ¿qué significa exactamente “sentarse en línea”? Eso es donde vertical-align viene en.
Los valores válidos son: línea de base, sub, super, arriba, parte superior del texto, medio, inferior, parte inferior del texto, longitudo un valor en porcentaje.
En mi opinión, la confusión se establece cuando las personas intentan usar la alineación vertical en elementos a nivel de bloque y no obtienen resultados. Si tiene un div pequeño dentro de un div más grande y desea centrar verticalmente el más pequeño dentro, la alineación vertical no le ayudará.
Base
El valor predeterminado de alineación vertical (si no declara nada) es base. Las imágenes se alinearán con el texto en la línea de base del texto. Tenga en cuenta que los descensos de las letras descienden por debajo de la línea de base. Las imágenes no se alinean con el punto más bajo de los descendientes, esa no es la línea de base.
Medio
Quizás el uso más común de la alineación vertical es establecerlo en ‘medio’ en imágenes de tamaño de icono. Los resultados son generalmente consistentes en todos los navegadores:
El navegador hace el mejor trabajo que puede centrar la altura de píxeles del texto con la altura de píxeles de la imagen:
Tenga en cuenta que si la imagen es más grande que el tamaño de fuente y la altura de línea actuales, empujará las siguientes líneas hacia abajo si es necesario:
Parte inferior del texto
A diferencia de la línea de base del tipo, es la parte inferior del texto, donde descienden los descendientes. Las imágenes también se pueden alinear con esta profundidad:
Texto en la parte superior
Lo contrario de text-bottom, es text-top, el punto más alto del tamaño de fuente actual. También puede alinearse con esto. Tenga en cuenta que la fuente actual, Georgia, probablemente tiene algunos ascendentes más altos que los representados aquí, de ahí el pequeño espacio.
Arriba y abajo
Top e Bottom funcionan de manera similar a text-top y text-bottom, pero no están limitados por el texto sino por cualquier cosa en esa línea (como otra imagen). Entonces, si hubiera dos imágenes en la misma línea, de diferentes alturas y ambas más grandes que el texto de esa línea, sus partes superiores (o inferiores) se alinearían independientemente del tamaño del texto.
Sub y Super
Estos valores representan superíndice y subíndice, por lo que los elementos alineados con estos métodos se alinean como tales:
Alineación vertical en celdas de tabla
A diferencia de las imágenes, las celdas de la tabla están predeterminadas en la alineación vertical media:
Si prefiere ver ese texto alineado en la parte superior o inferior de la celda cuando necesita extenderse más allá de la altura que necesita, aplique la alineación vertical superior o inferior:
Al usar la alineación vertical en las celdas de la tabla, la mejor opción es ceñirse a la parte superior, inferior y central. Ninguno de los otros valores tiene mucho sentido de todos modos y tienen resultados impredecibles en todos los navegadores. Por ejemplo, establecer una celda en el texto inferior alinea el texto con la parte inferior en IE 6 y la parte superior en Safari 4. Si se establece en sub, se produce una alineación intermedia en IE 6 y superior en Safari 4.
alineación vertical y bloque en línea
Las imágenes, aunque técnicamente son elementos de nivel en línea, se comportan más como elementos de bloque en línea. Puede establecer su ancho y alto y lo obedecen, a diferencia de la mayoría de los elementos en línea.
Los elementos de bloque en línea se comportan como imágenes con alineación vertical, así que consulte lo anterior. Sin embargo, tenga en cuenta que no todos los navegadores tratan los elementos de bloque en línea de la misma manera, por lo que la alineación vertical puede ser la menor de sus preocupaciones. Sin embargo, esa es otra historia….
En desuso como atributo
Ocasionalmente, verá que se usa “valign” en las celdas de la tabla para lograr la alineación vertical. p.ej <td valign=top>. Cabe señalar que este atributo está obsoleto y no debe utilizarse. Realmente no hay ninguna razón para ello de todos modos, ya que puede hacerlo con CSS de todos modos.
Más información
- alineación vertical en el Almanaque
- alineación vertical en MDN
- Christopher Aue: todo lo que necesita saber sobre la alineación vertical
- Truco para centrar las cosas en altura desconocida padres