Si alguna vez has intentado centrar contenido verticalmente en una página web, seguramente sabes lo frustrante que puede ser. Pero no te preocupes, ¡tenemos la solución! En este artículo te explicaremos cómo puedes utilizar CSS para centrar contenido en el eje vertical sin complicaciones. Así que, si quieres ahorrar tiempo y evitar dolores de cabeza, sigue leyendo para descubrir todo lo que necesitas saber para lograrlo con éxito.
En este tutorial, vamos a cubrir los diversos métodos de centrando el contenido verticalmente. Centrar elementos verticalmente es una tarea que a menudo presenta desafíos adicionales para los desarrolladores web. Existen varias soluciones con respecto al centrado, y todas dependen exactamente del tipo de contenido que desea centrar.
La razón es que los elementos HTML utilizados para el contenido pueden ser elementos de nivel en línea o elementos de nivel de bloque. Ambos tipos de elementos se comportan de manera diferente, por lo que la alineación vertical se realiza de diferentes maneras.
Propiedad de alineación vertical
La mayoría de la gente trata de alinear verticalmente el contenido usando el vertical-align: middle estilo. Esto puede parecer lógico, especialmente para aquellos de ustedes que han estado desarrollando páginas durante bastante tiempo y utilizan diseños basados en tablas.
vertical-align funciona bien en celdas de tablas y con algunos elementos en línea. El uso de vertical-align dependerá del elemento. Echemos un vistazo a algunos de los ejemplos en los que usamos el vertical-align propiedad.
Mostrar como celdas de tabla
Podemos diseñar un elemento a nivel de bloque con la propiedad de visualización y el valor de table-cell junto con vertical-align propiedad y valor de middle. Debe tener en cuenta que las tablas CSS no son lo mismo que las tablas HTML. Además, aunque esto funcionará para la mayoría de los navegadores modernos, Internet Explorer (IE) versión 7 y anteriores no lo admiten.
el html
<div class="container">
<div class="vTableCell">
This text is vertically centered.
</div>
</div>el css
.container {
display: table;
}
.vTableCell {
display: table-cell;
vertical-align: middle;
height:200px;
}Alinear verticalmente elementos en línea: imágenes
Algunos elementos en línea, como las imágenes, se pueden centrar verticalmente con este enfoque. Las imágenes son técnicamente elementos de nivel en línea, pero se comportan más como inline-block elementos. También se pueden considerar bloques, ya que puede establecer su width y height atributos
Este no es el caso para la mayoría de los otros elementos en línea. Si vas a utilizar el vertical-align propiedad en las imágenes, tenga en cuenta que no todos los navegadores pueden tratar inline-block elementos de la misma manera. Asegúrese de probar este enfoque utilizando los navegadores que espera que visiten su sitio.
el html
<p>This image is vertically
<img src="https://www.itgeared.com/how-to-vertically-center-html-content-using-css/image1.jpg" width="128" height="64" />
on this line.
</p>el css
p {
font-size:large;
}
img {
vertical-align: middle;
}Método de altura de línea
Utilizando el line-height propiedad, podemos centrar verticalmente una sola línea de texto. Todo lo que necesita hacer es establecer un line-height en el elemento que contiene el texto.
El line-height debe establecerse en un valor que sea mayor que el tamaño de la fuente. Esto dará como resultado un espacio igual por encima y por debajo del texto, por lo que el texto se ubicará centrado verticalmente.
el html
<p class="vCenter">
This single line of text is centered vertically.
</p>el css
.vCenter {
line-height: 100px;
}Este enfoque funciona bien en todos los navegadores, pero para un sola línea de texto. Si su texto puede ajustarse a la segunda línea, deberá utilizar un enfoque diferente.
También debe tener en cuenta que al configurar el tamaño de la fuente, debe usar font-size en lugar del atajo font. El motivo es que la propiedad de acceso directo incluye la altura de la línea, por lo que si no la configura en la propiedad de acceso directo, restablecerá la altura de la línea al valor predeterminado de 1.
Consejo: Si necesita centrar verticalmente varias líneas de texto, use el table-cell enfoque descrito anteriormente.
Posicionamiento absoluto con márgenes negativos
Esta técnica funcionará para elementos de nivel de bloque independientemente del navegador que se utilice para visitar la página. Usando este enfoque, simplemente necesitamos establecer la altura del elemento que queremos centrar verticalmente dentro de su elemento principal. Podemos usar píxeles fijos o porcentajes para la altura.
En este ejemplo, usaremos dos divs (principal y secundario) donde el elemento secundario se establecerá con una posición absoluta.
el html
<div id="container">
<div id="content"></div>
</div>el css
#container {
position: relative;
height:300px;
}
#content {
position: absolute;
height: 150px;
width: 150px;
background: #ffaa00;
margin: -75px 0 0 -75px;
top: 50%;
left: 50%;
}Debe notar que para ambos elementos div, establecemos el posicionamiento del elemento externo (principal) en relativemientras que el elemento interno (hijo) se estableció en absolute. Además, establecemos los valores superior e izquierdo del elemento secundario en un 50 % cada uno, que es el centro del elemento principal.
Sin embargo, esto establece que la esquina superior izquierda esté en el centro, por lo que se necesitan más ajustes. Para centrar verticalmente al niño, necesitamos mover el niño hacia arriba la mitad de su altura y si queremos centrarlo también horizontalmente, moverlo hacia la izquierda la mitad de su ancho.
Nuestro ejemplo usó longitudes fijas, pero también podemos usar porcentajes si es necesario. Para mover al niño hacia arriba y hacia la izquierda, usamos márgenes superior e izquierdo negativos que son iguales a la mitad de la altura y el ancho del niño. Esta técnica se usa específicamente para elementos a nivel de bloque.
Conclusión
No hay un enfoque correcto e incorrecto aquí. Algunas de las técnicas de esta guía funcionarán mejor para elementos en línea, mientras que otras funcionarán mejor para elementos a nivel de bloque.
Debe tener en cuenta que algunos ejemplos enumerados anteriormente pueden no funcionar en versiones anteriores de un determinado navegador. Siempre trate de usar un enfoque simple que funcione para la mayoría de sus usuarios.
