Centrar verticalmente contenidos con CSS

A veces no resulta tan trivial conseguir que nuestros contenidos se centren verticalmente, es por ello que vamos a explicar como llevar dicha a cabo dicha tarea de una forma sencilla.

Antes de nada repasemos como funciona el centrado de contenidos horizontalmente:
Al elemento contenedor le ponemos la propiedad “text-align” con valor “center” y los elementos interiores se centran. Ahora bien este centrado solo funciona con elementos inline, si lo que queremos es centrar bloques, entonces debemos utilizar la propiedad “margin” con valores “0 auto” en los elementos interiores, es decir no en el elemento contenedor como en el caso anterior. De esta forma conseguimos el centrado horizontal para elementos con “display” con valor “block”.

En el caso del centrado vertical no nos vale la propiedad margin con valores auto como en el caso horizontal. Por ejemplo si lo que queremos es centrar un texto dentro de un elemento contenedor que tiene altura 20px, entonces una solucion sencilla es indicar que dicho texto tiene una altura de linea de 20px. Es decir poner la propiedad “line-height” con valor “20px”.

Ahora bien imaginemos que queremos centrar verticalmente una foto dentro de un elemento contenedor, como puede ser una etiqueta “div”. La foto tiene 100px de altura, y el contenedor 300px. Bien para lograr que la foto se centre verticalmente, debemos añadir un elemento dentro de la capa contenedora. Dicho elemento va a tener una altura de 300px (la misma que la capa contenedora), una anchura de 1px, un margen derecho de -1px, un display de bloque en línea, y una alineación vertical media. A su vez la imagen va a tener una alineación vertical media.

< span style=" display: inline-block; margin-right: -1px; vertical-align: middle; height: 400px; width: 1px; ">< /span>
Como conclusión decir, que para centrar verticalmente necesitamos tener dos elementos dentro de la capa contenedora, para que se centren uno respecto del otro.

Comentarios

Sin comentarios
Ha habido un error en el envío
Comentario enviado. Será revisado por la moderación antes de ser publicado.

Deja tu comentario

Tu nombre:
Tu email:
Tu comentario:
Nuestra página web utiliza cookies propias y de terceros, para realizar el análisis de la navegación de los usuarios y así poder mejorar nuestros servicios. Si continúas navegando, consideramos que aceptas su uso. Puedes cambiar la configuración u obtener más información aquí