4 sencillas maneras de alinear divs horizontalmente

Anuncio:

En esta entrada vamos a ver distintas maneras para alinear dos divs horizontalmente por css, para ello, usaremos las propiedades ‘float’ , ‘display’ y ‘position’.

Es muy probable que haya muchas más maneras, es cuestión de imaginación, pero en este post he recogido las que me han parecido más sencillas.

Puedes acceder a los ejemplos aquí

Recomiendo que vayas echando un ojo a los ejemplos mientras se va explicando cada manera.

Para cada ejemplo, tenemos el siguiente html, un div contenedor con un id y dos divs horizontales hijos con clases ‘A’ y ‘B’, tal que así:

div id="contenedor">
  div class="A">div A /div>
  div class="B">div B /div>
/div>

Para comenzar, vamos a empezar especificando las propiedades comunes para todos nuestros divs:

div{
	width: 200px;
	padding: 25px 0;
	margin: 0;
}

float

La propiedad float de CSS especifica cómo flotar un elemento, en el primer caso del ejemplo, ambos divs están flotando a la izquierda, pero quizás tengamos el problema de que ‘se desajuste’ el tamaño del div contenedor, así que le ponemos un ‘overflow:hidden’ para obligar al contenedor a recalcular la altura total.

#flotante{  /*padre*/
	overflow: hidden;
	width: 100%; 
}
#flotante .A, #flotante .B{  /*hijos*/
	float: left;
}

Deberíamos tener el tamaño del padre definido.

display

Con la propiedad display tenemos 2 posibilidades:

display:inline-block

Esta propiedad es la que se suele usar para alinear los elementos ‘li’ de las listas, normalmente en un menú.
Por defecto, los elementos ‘cajas’ tienen display:block, divs, párrafos… , para conseguir un alineamiento horizontal, veamos el siguiente código:

#bloque{  /*padre*/
	width: 100%;
}
#bloque .A, #bloque .B{  /*hijos*/
	display: inline-block;
}

Simplemente con especificar la propiedad ‘display:inline-block’ en los hijos, tendríamos suficiente.

display:table-cell

Este valor de la propiedad ‘display’ vendría a simular la alineación de una tabla:

#tabla{  /*padre*/
	width: 100%;
}
#tabla .A, #tabla .B{  /*hijos*/
	display: table-cell;
}

Bastante sencillo, ¿no?

Flexbox

Ahora veamos una de las técnicas relativamente nuevas para alinear divs horizontalmente, y, además, nos serviría para centrarlos.
En este caso, el contenedor (div padre) ha de tener el siguiente código:

#flex { display: flex; }

Con esto ya conseguiremos la alineación horizontal, pero ahora hemos de distribuir a los elementos hijos, modificaremos el código anterior para centrarlos al medio:

#flex { display: flex; justify-content: center; width: 100%;}

En la propiedad justify-content tenemos varias opciones:

• center: para alinearlos al medio
• flex-start: para alinearlos al inicio
• flex-end: para alinearlos al final
• space-around: para distribuirlos uniformemente a través del ancho del padre

Hay más posibles valores para esta propiedad, te animo a que los descubras investigando por ti mismo.

position

Por último, quizás este método sea algo más enrevesado, pero siempre viene bien cuando, por algún motivo, no nos son útiles los métodos anteriores.

Para saber más sobre la propiedad position, sigue a explicación de position.

#posicion{  /*padre*/
	position: relative;
	padding: 0;
}
#posicion .B{  /*hijos*/
	position: absolute;
	left: 200px;
	top: 0;
}

si no entiendes demasiado bien este último caso, echa un ojo al enlace anterior.

Ejemplos

Espero que haya sido útil.

HackSaludos!

• CSS3