Centrar verticalmente contenido en un div
Categories: CSS, html - Tags: CSS, tutorialCentrar 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
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
No sirve en ff ni ie6, no se en los otros, pero me imagino que no5b5
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
Hola. Gracias por el aporte. Funciona
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.