Centrar verticalmente contenido en un div

por | Jul 31, 2009 | CSS, html | 4 Comentarios

Centrar un contenido en una tabla suele ser muy sencillo basta agregar un valign=»middle» pero intentar hacer eso en un div suele no ser tan sencillo aun esa propiedad en css parece no funcionar, sin embargo eso tiene solución agregando una linea mas al CSS

1
2
3
<div class="image">
    <img src="point.png" alt="square" />&nbsp;  
</div>

En ese caso vamos a centrar la imagen point.png, he agregado ese   porque a veces firefox no centra si no hay algo de texto en este caso un espacio en blanco.

Lo importante aqui es la hoja de estilos con la propiedad line-height que debe tener la misma altura que nuestro DIV y nuestra imagen debe tener el vertical-align:middle

1
2
3
4
5
6
7
8
9
10
.image {
border:thick solid;
height:8em;
width:14em;
border-color:#FF9999;
line-height:8em;
}
.image img{
vertical-align:middle;
}

Puedes ver el ejempo AQUI

4 Comentarios

  1. usuario
    usuario el mayo 27, 2010 a las 10:14 am

    No sirve en ff ni ie6, no se en los otros, pero me imagino que no5b5

  2. Miguel Manchego
    Miguel Manchego el mayo 27, 2010 a las 11:59 am

    Salvo que requiera lentes yo veo en el ejemplo del post que cuadrado amarrillo se encuentra centrado verticalmente respecto al cuadrado que lo rodea, en otras palabras funciona

  3. usuario
    usuario el agosto 29, 2011 a las 7:48 am

    Hola. Gracias por el aporte. Funciona 🙂

  4. usuario
    usuario el octubre 4, 2011 a las 9:56 am

    admin, es diferente el css que esta escrito en el post, al que esta en el ejemplo, por eso funciona.
    así tal cual, no funciona.