15 Abr Centrado vertical de un contenido web con css
En anteriores ocasiones se ha tratado el centrado horizontal de contenidos en una página web.
Sin embargo a menudo cuesta encontrar bibliografía sobre el centrado vertical de contenidos.
En este escrito no esperes la solución definitiva pero si una excusa para practicar con 3 estrategias distintas.
Los conceptos mínimos que deberías tener para aprovechar esta publicación son:
Por el momento no tengo pensado tratar el tema de flex aunque tal vez lo haga en un futuro.
¡Entremos en materia!
Enunciado
Dados 3 contenedores con un párrafo en su interior se desea centrar verticalmente su contenido.
Se plantea jugar con 3 estrategias diferenciadas para conseguirlo.
- La primera mediante el uso de la propiedad padding
- La segunda mediante el uso position:absolute combinado con margin-top negativo.
- La tercera mediante el uso de la propiedad display:table.
El código html del que se dispone es el siguiente.
<!DOCTYPE html>
<html>
<head>
<title>centrado vertical de textos</title>
<style>
*{box-sizing:border-box;margin:0;padding:0;}
[class*="estrategia-"]{
border:1px solid #000;
margin:32px;
width:300px;
}
.estrategia-1 p{/*uso de padding*/}
.estrategia-2{/*uso de posicionamientos*/
.estrategia-2 p{}
.estrategia-3{/*uso de tablas css*/}
.estrategia-3 p{}
</style>
</head>
<body>
<div class="estrategia-1">
<p>texto centrado con padding</p>
</div>
<div class="estrategia-2">
<p>texto centrado con posicionamientos</p>
</div>
<div class="estrategia-3">
<p>texto centrado con display:table</p>
</div>
</body>
</html>Solución del ejercicio
A continuación se explica el centrado vertical para una línea.
Se tomará consideración que la altura de una línea de texto son 18px (16px de fuente más 1px superior y 1px inferior cada línea).
Explicación estrategia uso de la propiedad padding
[class*="estrategia-"]{
border:1px solid #000;
margin:32px;
width:300px;
}
.estrategia-1 p{
padding:32px 0;
}El centrado mediante padding superior e inferior es para mi el más limpio de todos.
Se basa en no especificar una altura de párrafo y conseguir así el mismo relleno en el lado superior y el inferior.
El efecto es un centrado vertical perfecto.
Tiene el inconveniente que en función de la altura real del párrafo (por ejemplo 2 o más líneas) la altura del contenedor puede variar.
Explicación estrategia uso de la propiedad position combinado con margin negativo
.estrategia-2{
position:relative;
height:82px;
}
.estrategia-2 p{
position:absolute;
top:50%;
height:18px;
margin-top:-9px;
}Damos un contenedor un posicionamiento relativo para servir de referencia.
Al párrafo le indicamos un posicionamiento absoluto con referencia el contenedor y una altura. A continuación le damos un margin-top negativa para desplazarlo superiormente justo la distancia para centrarlo.
Tiene como inconveniente que tenemos que dar una altura al párrafo. Si por ejemplo el párrafo necesitara 2 o más líneas entonces no quedaría bien centrado o no cabría el espacio en contenido indicado.
Desde mi punto de vista esta es la peor alternativa de todas.
Explicación estrategia uso de la propiedad display:table;
.estrategia-3{
display:table;
}
.estrategia-3 p{
height:82px;
display:table-cell;
vertical-align:middle;
}La estrategia mediante display:table; es una buena alternativa. Se basa en la posibilidad de poder centrar verticalmente el contenido dentro de una celda.
Sólo tenemos que dar a la celda altura suficiente para que quepa todo el contenido que pongamos que este siempre estará bien centrado.
Si tenemos necesidad de tener una altura de contenedor determinada esta es para mi la mejor solución de las 3.
¡Hola!
Querido lector,
Deseo que esta publicación te haya ayudado a esclarecer 3 conceptos de css muy diversos. ¿Con cuál te quedas?
Si te ha gustado este contenido te animo ahora a investigar sobre Flex.
¡Te espero en mi perfil de empresa de Linkedin!
No Comments