Abr
08
22
Centrar verticalmente con CSS
Por: DarkPaladin
Mientras realizaba uno de mis proyectos, tuve la necesidad de alinear una imagen en el centro de un div, y rapidamente pense: es facil con vertical-align:middle. Al intentarlo, no ocurria nada, tambien lo intente con margin:auto y tampoco. Asi que tuve que buscar en Google y encontre esto:
CSS:
-
div#caja {
-
border:1px solid blue;
-
width: 300px;
-
height: 300px;
-
display: table-cell;
-
vertical-align: middle;
-
text-align: center;
-
}
-
-
div#caja img {
-
margin-top: expression((300 - this.height)/2);
-
}
Vean que el div tiene definidas sus medidas, y en la expresion reemplazen el 300 por la altura del div. Al parecer es una expresion javascript usada en css. Y este es el resultado:
