Muchas veces he llegado al punto de no saber cómo poder hacer para centrar un texto verticalmente en un párrafo o div.
Podemos conseguir centrar verticalmente un texto con CSS aplicando un alto de línea (line-height) igual al alto (height) del elemento donde queremos centrar verticalmente.
Por ejemplo si tenemos un párrafo de 80px de altura, sólo debemos dar line-height:80px;
Código HTML:
<div id="vert_cent"> <p>Texto centrado verticalmente</p> </div>
Código CSS:
div#vert_cent {
height:80px;
width:350px;
margin:10px auto;
background:#eee;
border:1px solid #666;
padding:0px;
}
div p{
margin:0px;
padding:0px;
line-height:80px;
}
Aquí el ejemplo funcionando:
Texto centrado verticalmente
El 21 dAmerica/Buenos_Aires Julio dAmerica/Buenos_Aires 2008, Armando... dijo:
Vaya, que solución tan limpia, lo estuve intentando con padding, margin, pero no dan este efecto, ah y por cierto buen comentario ese que dice:
"si tenemos un párrafo de 80px de altura, sólo debemos dar line-height:80px;"
con eso se entinde todo lo que se debe hacer :P
Saludos…
El 21 dAmerica/Buenos_Aires Julio dAmerica/Buenos_Aires 2008, Marcelo dijo:
Gracias Armando por tu comentario :)