comparte el articulo 

Métodos para centrar verticalmente con CSS: Parte 1

Actualizado el 10/04/2012 < > 0 Comentarios

Resumen: Primera parte de una serie de consejos para centrar verticalmente el contenido mediante CSS

El centrado vertical de los elementos con CSS, es un tema que a menudo causa problemas a los desarrolladores y diseñadores web que desean modificar el alineado de una estructura. La manera en que este alineado se aplicaba en el pasado y las malas costumbres que perduraron con el tiempo han hecho que resulte difícil para un diseñador el uso de CSS para lograr esta funcionalidad.

Muchos son los que desconocen la manera correcta de lograr este alineado con CSS, por lo que recurren al uso de las tradicionales pero malditas tablas que sólo vienen a entorpecer nuestro DOM. Para todos nosotros que nos hemos visto envueltos en alguna problemática con el centrado vertical, traemos en este artículo una variedad de métodos que nos ayudarán a lograr el alineado de manera fácil y sencilla.

Primero que nada debemos tener conciencia de que quizás un método sólo sea el adecuado para unos casos y no para todas las situaciones, debemos saber reconocer y apreciar la variedad, es por ello que en este artículo se van a exponer varios métodos y no uno en absoluto. El primero de estos métodos es “vertical-align”, que no siempre funcionará, pero nos ayudará a comprender mejor el centrado vertical en general.

Vertical-align

El hecho de que el centrado horizontal con CSS resulta bastante fácil de aplicar, hace pensar a la mayoría que el centrado vertical será cuestión de una simple sentencia. Aunado a esto, el uso de tablas nos ha dicho que con la aplicación de un atributo “valign” podemos centrar de manera vertical nuestro contenido, es por ello que muchos ven a “vertical-align” como la solución a su problema pensando que esta función centrará automáticamente cualquier elemento ya sea inline o de bloque.

Pero les recuerdo, esto no son tablas, estamos manejando una estructura DOM que tiene elementos de comportamientos muy independientes y “vertical-align” desgraciadamente no tiene influencia sobre los elementos de bloque, únicamente funciona con elementos inline y por supuesto para el contenido en tablas, por lo que es la alternativa CSS correcta para el famoso “valign”.

En base a esto podemos establecer que si aplicamos dicho atributo a una elemento en línea como una imagen, si podremos obtener el resultado deseado.

img {
   vertical-align: middle;
}  

Los valores válidos para esta propiedad son baseline, sub, super, top, text-top, middle, bottom, text-bottom, length, o un valor en porcentaje. Pero si lo que queremos es aplicar un centrado vertical a elementos de bloque entonces debemos recurrir a otra clase de métodos, y el método que elija dependerá de lo que usted está tratando de centrar en relación a su elemento contenedor.

Line-Height

Este método funcionará cuando queramos alinear verticalmente una sola línea de texto. Todo lo que necesitamos hacer es establecer una altura para la línea sobre el elemento que contiene el texto y para ello usaremos la propiedad “line-height”, recordando que dicha altura debe ser mayor al tamaño de la fuente para que tenga el efecto deseado.

Por defecto el espacio proporcionado se repartirá de manera equitativa para la parte superior e inferior del texto por lo que este se centrará de manera vertical. En caso de que esta modificación no tenga el efecto deseado también se puede modificar la altura del elemento contenedor para igualarla a la de la línea de texto.

Es entonces que si tenemos un código HTML que luzca de la siguiente manera:

<div id="divContenedor">
	<div id="divHijo">Texto de prueba</div>
</div>

Y aplicamos el siguiente estilo:

#divHijo {
	line-height: 400px;
}

Lograremos apreciar “Texto de prueba” de manera centrada verticalmente. Este método funciona en todos los navegadores, el único problema de esto es que sólo servirá para una sola línea de texto si agregamos una segunda o tercera línea el efecto se verá afectado y tendremos que usar un método diferente.

En este caso yo di un valor de 400 píxeles para la altura, pero se puede proporcionar cualquier valor que se crea conveniente.

Centrar una imagen con line-height

Muchos se podrán haber planteado la cuestión de que si este método tiene efecto sobre imágenes, y afortunadamente así es. Si aplicamos la propiedad a una imagen obtendremos el mismo resultado, sólo con una variación, debemos agregar otra línea a nuestro código CSS.

Se establece el “line-height” como lo hicimos anteriormente, el cual tendrá que ser mayor que la altura de la imagen, y ajustamos el “vertical-align” dando un valor de “middle” para la imagen. En base a esto nuestro código HTML quedaría de la siguiente manera:

<div id="divContenedor">
	<img src="imagen.png" alt="imagen" />
</div>

Mientras que el código CSS lucirá así:

#divContenedor {
	line-height: 200px;
}
#divContenedor img {
	vertical-align: middle;
}

Uso de tablas CSS

No te asustes al oír la palabra Tabla, en esta ocasión no nos estamos refiriendo a las tablas comunes que generalmente se usaban para darle forma a un layout en el pasado, lo que haremos en esta ocasión es utilizar CSS para mostrar elementos como tablas y celdas para después utilizar la propiedad vertical-align y así centrar el contenido.

Si tenemos una estructura como la siguiente:

<div id="divContenedor">
	<div id="divHijo">Contenido de la tabla</div>
</div>

Y aplicamos un CSS como el siguiente:

#divContenedor {
    display: table;
}
#divHijo {
	display: table-cell;
	vertical-align: middle;
}

Obtenemos un div padre que se muestra como tabla y un div hijo que hace lo propio como celda de dicha tabla. A partir de este momento podemos utilizar la propiedad “vertical-align” a la cual le damos el valor de middle para añadir el alineado vertical.

A diferencia del método anterior, el contenido puede ser dinámico y va a crecer en base a lo que se coloca dentro del div. La desventaja de este método es que no funciona en versiones antiguas de IE, aunque hay una solución, que consiste en añadir “display: inline-block” al elemento secundario.

Publicado el 04/08/2011, última actualización 10/04/2012.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño Paginas Web

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras