comparte el articulo 

Métodos para centrar verticalmente con CSS: Parte 2

Actualizado el 10/04/2012 < > 0 Comentarios

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

Continuamos con esta serie de métodos que nos permitirán lograr un correcto mediante CSS. En la primera parte de este artículo, centrado vertical con CSS, tuvimos la oportunidad de estudiar tres métodos fundamentales y sencillos para lograr dicho alineado, “vertical-align”, “line-height” y “display: table-cell” nos ayudaron a conseguir el objetivo utilizando únicamente estilos.

En esta ocasión analizaremos cuatro métodos más para complementar el tema y tener un margen de elección más grande, pues hay que recordar que un método no va a funcionar para todas las ocasiones, la situación determinará cual de todos utilizar.

Posición absoluta y margen negativo

Este método puede ser utilizado sobre elementos de tipo bloque y funciona en todos los navegadores, incluyendo Internet Explorer. Para su correcto funcionamiento se requiere que se ajuste la altura del elemento que se desea centrar, proporcionándole a su vez una posición de tipo absoluta y márgenes negativos para lograr el centrado.

Por ejemplo si quisiéramos centrar tanto de manera horizontal como vertical un elemento de tipo “div” que se encuentra dentro de otro que actúa como contenedor, tendríamos que agregar un código CSS como este:

#divContenedor {
    position: relative;
}
#divHijo {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 30%;
    width: 50%;
    margin: -15% 0 0 -25%;
}

El cual tendría efecto sobre esta estructura:

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

Lo primero que hacemos en nuestra sentencia CSS es definir la posición de ambos elementos, se le da una posición relativa al contenedor y al hijo se le da una absoluta. La posición absoluta indicará que el elemento interno estará posicionado en base a su primer elemento antecesor, en este caso “divContenedor”.

A continuación establecemos los valores para “top” y “left” en 50%, lo que ubicará a “divHijo” con un margen superior e izquierdo que equivaldrá a la mitad del tamaño del contenedor. Esto en teoría se consideraría el centro, pero el elemento no lucirá totalmente centrado si lo manejamos así, puesto que la única parte de “divHijo” que esta en el centro es la esquina superior izquierda.

Para retocar esto, debemos mover a “divHijo” de tal manera que quede centrado, para ello damos una anchura de 50% y una altura de 30%, de esa manera vamos a conocer la altura y anchura de nuestro elemento hijo, para finalmente aplicar los márgenes negativos que nos darán el centrado esperado.

A diferencia de los otros métodos que observamos en el artículo anterior éste es el primero para elementos de bloque, sin embargo se debe de manejar con cuidado pues el contenido puede superar a su contenedor y eso causa que visualmente desaparezca, por lo que es fundamental conocer bien la altura y anchura del elemento.

Posición absoluta y estiramiento

Al igual que con el método anterior, éste empieza por establecer el posicionamiento de los elementos padre e hijo como relativo y absoluto, respectivamente, pero a partir de ahí las cosas son diferentes.

En lo que consiste este método es tratar de conseguir que el elemento hijo se extienda a todo bordes del elemento contenedor. Para lograr esto, se recurre a las propiedades “top”, “bottom”, “right” y “left” las cuales son establecidas con un valor de 0 en el estilo de “divHijo”. Debido a que nuestro elemento hijo es menor que el elemento contenedor no puede abarcar los cuatro bordes.

Si a esto le añadimos un margen automático para los cuatro lados, lograremos crear el efecto de centrado vertical ya que los márgenes que se oponen serán iguales, obteniendo un código CSS final como este:

#divHijo {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 30%;
    margin: auto;
}

Desgraciadamente este método tiene dos desventajas, ya que no funciona para Internet Explorer en versiones menores a la 7 y al igual que con el método anterior si el contenido crece mucho puede causar su ocultamiento.

Padding

Este método consiste en dejar la responsabilidad del ajuste automático de márgenes del elemento hijo al navegador, proporcionando un padding tanto para el contenedor como para el hijo y así igualar las distancias.

#divContenedor {
    padding: 5% 0;
}
#divHijo {
    padding: 10% 0;
}

Con este CSS proporcionamos un padding superior e inferior para ambos elementos. Al proporcionar dichas propiedades para “divHijo” nos estamos asegurando de que estará verticalmente centrado, mientras que el padding proporcionado al padre asegura que el hijo estará centrado en base al contenedor.

Este método funciona en cualquier navegador, la desventaja es que dependiendo de los detalles de su proyecto es posible que tenga que hacer un poco de matemáticas para calcular el padding correcto para centrar su elemento.

Div flotador

Este es el último método que veremos, para poder llevarlo a la práctica requerimos de un div vacío que se encuentre flotando en nuestro DOM. Dicho div será el encargado de controlar la posición de nuestro elemento hijo.

Para lograr tal efecto necesitamos colocar nuestro div flotador a una posición fija ya sea a la izquierda o derecha dentro del div contenedor, después le damos una altura que abarque el 50% del div contenedor y una anchura del 100%, lo que hace que se llene toda la mitad superior del elemento padre.

Código html:

<div id="divContenedor">
    <div id="divflotador"></div>
    <div id="divHijo">Contenido de prueba</div>
</div>

Código css:

#divContenedor {
    height: 250px;
}
#divflotador {
    float: left;
    height: 50%;
    width: 100%;
    margin-bottom: -50px;
}
#divHijo {
    clear: both;
    height: 100px;
}

Debido a que el div agregado se encuentra flotando, no esta considerado dentro de la estructura normal del documento, es por ello que necesitamos aplicar la propiedad “clear” en el elemento hijo.

El borde superior del div hijo ya debe estar inmediatamente por debajo del borde inferior de la div flotante. Es necesario hacer llegar el elemento hijo por un monto igual a la mitad de su altura y para ello hemos establecido un margen negativo de fondo en el div flotante.

Este método también funciona en todos los navegadores. La desventaja es que requiere un div vacío y que conozcamos la altura exacta del elemento que actuará como hijo.

Publicado el 09/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