Como Alinear 3 Div a la izquierda centro y derecha

miércoles, 9 de octubre de 2013

Este blog no esta mantenido, suscribite a la newsletter del nuevo
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



17 comentarios:

  1. Muchas gracias... De Eduardo Ramírez

    ResponderEliminar
  2. Muchas gracias, estuve buscando en muchos lados y esto solucino lo que yo queria.

    ResponderEliminar
  3. Hola, muchas gracias por compartir tus conocimientos, estoy buscando una solución similar pero no logro dar con ella. Resulta que tengo dos cajas dentro de un div horizontal (un logo y un enlace). Quiero que el enlace me quede a la derecha del div contenedor y el logo en el centro, pero en el centro del div, no en el centro del espacio restante. No se si me explico. Dicho de otra forma: quiero espacio vacío hasta el centro, el logo en el centro (justo en el centro del div, para que quede centrado en la pantalla) y a la derecha el texto con el enlace...Si ppudiera adjuntar un archivo con la imagen...Muchas gracias de antemano!!

    ResponderEliminar
    Respuestas
    1. Creo que la solución podría ser que agregaras una caja mas. Es decir un div con tres contenedores: el primero vacio con un width del 40%, el segundo con el logo y un width del 20%, y el tercero con el enlace y un width del 20%. Asi los tres contenedoreres estaria en un fila y tendrias el logo centrado en la pagina.

      Eliminar
  4. Excelente, pero si trato de ponerle un fondo, se desconfigura.

    Por ejemplo color negro.

    ResponderEliminar
  5. mil millones de gracias!

    ResponderEliminar
  6. Muchas gracias, llevaba dias intentando recordar como hacerlo y no encontraba

    ResponderEliminar