Como Alinear 3 Div a la izquierda centro y derecha

miércoles, 9 de octubre de 2013

En ocaciones en html tenemos la necesidad de organizar el contenido de un contenedor a la derecha , izquierda y centro. Por ejemplo en un header podemos querer un logo a la izquierda, menú en centro y caja de búsqueda a la derecha.

Vamos a ver un ejemplo.


Creamos los elementos en html

Logo
Menu
Ahora vamos con el css. Con el atributo float left o right la parte iquierda y derecha de una forma rápida podemos ubicar el contenido de la derecha e izquierda. 
.left{
    float: left;
    background:blue
}
.right{
    float: right;
    background:red
}
.center{
    background:green;

Pero todavía no obtenemos el resultado esperado, porque con float left y right estos div su ancho se adapta al de su contenido pero el del centro todavía ocupa todo el espacio disponible.



para conseguir que el ancho del div del centro se adapte al de su contenido tenemos que indicar display:inline-block y para que quede centrado según el espacio disponible, le indicamos al contenedor de los divs tenga text-align:center.


.container{
    text-align:center
}
.left{
    float: left;
    background:blue
}
.right{
    float: right;
    background:red
}
.center{
    background:green;
   display:inline-block
}

Y ahora ya tenemos el resultado deseado

Demo de ejemplo

Otra forma de centrar el div central es que tenga un ancho fijo y entonces asignamos a la propiedad margin el valor 0 auto.

Demo margin igual 0 auto

Libros Relacionados



6 comentarios: