Codificación aprenderaprogramar.com: CU01043D
CENTRADO VERTICAL DE ELEMENTOS
Hemos visto un número relativamente amplio de propiedades CSS que nos permiten trabajar aspectos de alineación en la horizontal y, sin embargo, las posibilidades de trabajo en la vertical son menores. Vamos a estudiar la propiedad vertical-align que permite el posicionamiento y centrado de elementos en la vertical, aunque su funcionamiento tiene ciertas complicaciones.
PROPIEDAD VERTICAL-ALIGN
Es muy frecuente oir la expresión “vertical-align no funciona bien” a personas que están comenzando con CSS o que tienen un conocimiento superficial de CSS. La realidad es que hay que conocer para qué sirve esta propiedad y comprenderla para poder valorar los resultados que se obtienen con ella.
Es una propiedad que al principio resulta difícil de entender, vamos a tratar de hacerlo poco a poco.
PROPIEDAD CSS vertical-align | |
Función de la propiedad | Permite posicionar elementos inline en distintas alineaciones verticales respecto a una línea. También permite alinear verticalmente cualquier elemento dentro de una celda de una tabla. |
Valor por defecto | baseline |
Aplicable a | Elementos inline y elementos dentro de celdas de tablas |
Valores posibles para esta propiedad | baseline (el elemento se alinea como lo haría normalmente) |
middle (elementos inline se alinean de modo que se centran verticalmente respecto a la línea del elemento padre en la que están; elementos en celdas de tablas se centran verticalmente en la celda de la tabla) | |
top y bottom (elementos inline se alinean de modo que se su parte superior se alinea con la línea en la que están; elementos en celdas de tablas se colocan en la parte superior en la celda de la tabla) | |
text-top y text-bottom (elementos inline se alinean de modo que su parte superior se alinea con la parte superior de la línea del elemento padre; su efecto suele ser muy similar al de top y bottom) | |
sub y super (elementos inline se alinean de modo que se su parte superior se alinea con las líneas de subíndice o superíndice del elemento padre) | |
Una unidad de medida relativa o absoluta válida en CSS (se admiten porcentajes. Desplaza la línea de base del elemento hacia arriba respecto a su baseline en la medida indicada. Si se indica 0 equivale a baseline; si es % se calcula respecto al valor de line-height. Se admiten valores negativos.) | |
inherit (se heredan las características del elemento padre). | |
Ejemplos aprenderaprogramar.com | img {vertical-align:middle;} |
Como vemos la propiedad vertical-align tiene cierta complejidad, entre otras cosas porque muestra distinto comportamiento según se aplique a elementos en contenedores “normales” o a elementos dentro de celdas de tablas.
Dentro de una tabla el comportamiento de vertical-align podemos decir que es el que espera la mayoría de la gente: permite centrar verticalmente.
Crea un documento HTML con este contenido para probarlo y visualiza los resultados:
<html> <head> <title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8"> <style type="text/css"> *{font-family: arial; } table {margin:20px; background-color:yellow;} td {height: 100px; text-align:center; padding:2px;} </style> </head> <body> <table border="1" cellpadding="0" cellspacing="0" style="width: 450px;"> <tr> <td style="vertical-align:baseline;" ><p>Un texto</p></td> <td style="vertical-align:top;" ><p>Un texto</p></td> <td style="vertical-align:bottom;" ><p>Un texto</p></td> <td style="vertical-align:middle;" ><p>Un texto</p></td> </tr> </table> </body> </html> |
Con las celdas de una tabla el resultado es el esperado: con top el texto se coloca arriba, con bottom se coloca abajo y con middle se centra verticalmente.
Ahora vamos a intentar emular este comportamiento con contenedores “normales” como div. Crea un documento HTML con este contenido para probarlo y visualiza los resultados:
<html> <head> <title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8"> <style type="text/css"> *{font-family: arial; } div {height: 100px; width:112px; text-align:center; padding:2px; float:left; background-color:yellow; border-style:solid;} </style> </head> <body> <div style="vertical-align:baseline;" ><p>Un texto</p></div> <div style="vertical-align:top;" ><p>Un texto</p></div> <div style="vertical-align:bottom;" ><p>Un texto</p></div> <div style="vertical-align:middle;" ><p>Un texto</p></div> </body> </html> |
¿Por qué no se alinea el texto? Pues porque la propiedad vertical-align funciona de una manera en tablas y de otra manera fuera de las tablas. Fuera de tablas, esta propiedad no puede aplicarse a elementos tipo block. Por tanto no puede aplicarse a un contenedor esperando que lo que haya dentro de él se centre verticalmente. El código anterior no tiene sentido (aunque mucha gente intenta realizar alineaciones verticales así, de ahí que se oiga con tanta frecuencia que “no funciona”).
Fuera de tablas, esta propiedad se aplica a elementos inline para centrarlos respecto a la línea en la que se insertan, no puede ser aplicada a un contenedor para que los elementos dentro de él se alineen verticalmente. El concepto es completamente distinto en tablas que fuera de tablas (lo cual es curioso y habría que preguntarle a los creadores de CSS por qué han hecho esto así). Para comprender el concepto de vertical-align fuera de tablas fíjate en esta imagen porque supone un resumen didáctico del uso de vertical-align fuera de tablas.
En el recuadro superior izquierdo vemos lo que sería una línea dentro de un contenedor div en su posición natural: se coloca en la parte superior del div. En el recuadro inferior izquierdo vemos cómo aparecería la imagen si se inserta dentro de una línea sin especificar vertical-align (o lo que es lo mismo, aplicándole vertical-align: baseline;). En el recuadro superior derecho se ha aplicado vertical-align: top; a la imagen y ésta lo que hace es poner su parte superior alineada con la línea dentro de la cual está la imagen. En el recuadro inferior derecho se ha aplicado vertical-align: middle; a la imagen y ésta se centra verticalmente respecto a la línea dentro de la cual está.
Podemos destacar lo siguiente:
a) vertical-align se aplica al elemento inline para alinearlo respecto a la línea dentro de la cual está (por el contrario, text-align se aplica al contenedor para alinear horizontalmente su contenido, lo cual es un concepto distinto).
b) vertical-align no alinea respecto al contenedor, sino respecto a la línea.
Mostramos ahora el código HTML. Escríbelo, visualiza los resultados y trata de comprenderlo:
<html> <head> <title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8"> <style type="text/css"> *{font-family: arial; } img { margin-left: 5px; margin-right:5px; } div { width: 360px; height: 210px; margin: 10px; padding:5px 20px; border-style: solid; border-color: red; border-width: thin; background-color: yellow; text-align: center;} </style> </head> <body> <div style="float:left;">Línea de texto sin una imagen</div> <div style="float:left;"> <p> Línea de texto<img style="vertical-align:baseline;" src="http://i.imgur.com/afC0L.jpg">con una imagen</p> </div> <div style="clear:both; float:left;" > <p> Línea de texto<img style="vertical-align:top;" src="http://i.imgur.com/afC0L.jpg">con una imagen</p> </div> <div style="float:left;"> <p> Línea de texto<img style="vertical-align:middle;" src="http://i.imgur.com/afC0L.jpg">con una imagen</p> </div> </body> </html> |
¿Y CÓMO ALINEAMOS ENTONCES VERTICALMENTE?
Ya hemos visto que vertical-align no nos va a servir para realizar un centrado vertical de un elemento dentro de un contenedor, pero esto nos interesará hacerlo con frecuencia. ¿Cómo hacerlo entonces?
Esta es una cuestión que suele generar problemas a los programadores y diseñadores web porque no existe un único método, sino que hay varias maneras de hacerlo y cada una tiene sus ventajas y sus inconvenientes.
Existen aproximadamente una docena de métodos más o menos estándar descritos para centrar verticalmente con CSS. Sin embargo, ninguno de ellos es la solución perfecta. Aquí vamos a poner un ejemplo de un método sin que esto signifique que sea el mejor ni que lo recomendemos. Simplemente lo ponemos a modo de ejemplo.
En nuestro caso vamos a tratar de centrar verticalmente un div interior situado dentro de un div exterior. A su vez el div interior tiene un texto y vamos a tratar de centrarlo verticalmente.
La situación de partida es esta:
<html> <head> <title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8"> <style type="text/css"> *{font-family: arial; } div {width: 300px; height: 300px; border-style:solid; background-color:#FED2FB; } div div {width:100px; height: 100px; text-align:center; background-color:yellow; border-style:dashed; border-width:2px;} div div p {color:blue; } </style> </head> <body> <div> <div ><p>Jump!</p></div> </div> </body> </html> |
Y el código que nos va a servir como solución, basado en posicionamiento absoluto del div interior respecto al exterior, es este:
<html> <head> <title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8"> <style type="text/css"> *{font-family: arial; } div {width: 300px; height: 300px; border-style:solid; background-color:#FED2FB; position:relative;} div div {width:100px; height: 100px; text-align:center; background-color:yellow; border-style:dashed; border-width:2px; top:50%; margin-top:-52px; left: 50%; margin-left:-52px; position:absolute; line-height:4em;} div div p {color:blue; } </style> </head> <body> <div> <div ><p>Jump!</p></div> </div> </body> </html> |
Escribe ambos códigos, visualiza el resultado y compara una situación y otra. Trata de comprender todo lo que hemos hecho (con los conocimientos adquiridos a lo largo del curso ya debemos ser capaces de interpretar este código). En un caso hemos posicionado el div interior respecto al interior y en el caso del texto hemos aplicado line-height para forzar al texto a desplazarse verticalmente. Si algo no te queda claro escribe una consulta en los foros (http://aprenderaprogramar.com/foros).
A modo de resumen: no hay un método universal para centrar verticalmente en CSS. Cada programador o diseñador usa uno o varios métodos y trata de buscar soluciones adaptadas a cada situación que se le plantea.
EJERCICIO
Analiza el siguiente código, visualiza su resultado y responde a las preguntas:
<html> <head> <title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8"> <style type="text/css"> *{font-family: arial; } div { width: 360px; height: 210px; margin: 10px; padding:5px 20px; border-style: solid; border-color: red; border-width: thin; background-color: yellow; text-align: center; float: left;} #vcent { display: table; } #vcent span { display: table-cell; vertical-align:middle;} </style> </head> <body> <div><span>Línea de texto contenedor 1</span></div> <div id="vcent"><span>Línea de texto contenedor 2</span></div> </body> </html> |
a) ¿Cuántas cajas contenedoras hay? ¿Están identificadas por id o por class o por ninguno de ellos?
b) Visualiza el resultado en al menos dos navegadores distintos. ¿Qué diferencias observas entre ambos? ¿A qué crees que se deben?
c) ¿Por qué el texto <<Línea de texto contenedor 2>> se muestra centrado verticalmente?
d) Modifica el código para que el texto <<Línea de texto contenedor 1>> se muestre centrado verticalmente.
Para comprobar si tu código y respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.
Para hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.