¿Cómo puedo alinear horizontalmente mis divs?

Para lograr lo que estás tratando de hacer:

Considere usar display: inline-block lugar de float .

Prueba esto:

 .row { width: 100%; text-align: center; // center the content of the container } .block { width: 100px; display: inline-block; // display inline with abality to provide width/height }​ 

MANIFESTACIÓN

• teniendo margin: 0 auto; junto con el width: 100% es inútil porque su elemento ocupará todo el espacio.

• float: left flotarán los elementos a la izquierda, hasta que no quede espacio, por lo tanto irán en una nueva línea. Use display: inline-block para poder visualizar elementos en línea, pero con la capacidad de proporcionar tamaño (en comparación con la display: inline donde se ignoran el ancho / alto)

Otro ejemplo de trabajo , usando display: inline-block y text-align: center

HTML :

 
 
 
Hello
 
World
 
 
  

CSS :

 .container { ... } .row { text-align: center; } .btn { display: inline-block; margin-right: 6px; background-color: #EEE; } .clear { clear: both; } 

Fiddle: http://jsfiddle.net/fNvgS/

Aunque no cubre esta pregunta (porque quiere alinear los

s dentro del contenedor) pero directamente relacionado: si quisiera alinear solo un div horizontalmente, podría hacer esto:

 #MyDIV { display: table; margin: 0 auto; } 

Las alineaciones en CSS habían sido una pesadilla. Afortunadamente, W3C introdujo un nuevo estándar en 2009: Flexible Box . Hay un buen tutorial sobre esto aquí . Personalmente, me parece mucho más lógico y más fácil de entender que otros métodos.

 .row { width: 100%; display: flex; flex-direction: row; } .block { width: 100px; } 

 
 
Lorem
 
Ipsum
 
Dolor
  

Usando FlexBox:

 
 
Lorem
 
Ipsum
 
Dolor
 
 .row { width: 100%; margin: 0 auto; display: flex; justify-content: center; /* for centering 3 blocks in the center */ /* justify-content: space-between; for space in between */ } .block { width: 100px; } 

La última tendencia es usar Flex o CSS Grid en lugar de usar Float. Sin embargo, todavía un 1% de navegadores no son compatibles con Flex. Pero a quien realmente le importan los viejos usuarios de IE de todos modos;)

Fiddle: mira aquí

Si los elementos deben mostrarse en una línea e IE 6/7 no importan, considere usar display: table y display: table-cell lugar de float .

inline-block conduce a lagunas horizontales entre los elementos y requiere la puesta a cero de esas lagunas. La forma más simple es establecer font-size: 0 para el elemento principal y luego restaurar font-size de font-size para los elementos secundarios que tienen display: inline-block estableciendo su font-size en un valor px o rem .

Intenté la respuesta aceptada, pero finalmente descubrí que:

 margin: 0 auto; width: anything less than 100%; 

Funciona bien hasta ahora.

He usado estos dos enfoques cuando necesito manejar la alineación div horizontal.
primero ( Alineación del centro usando la propiedad de margen ):

 .center-horizontal-align { margin-left: auto; margin-right: auto; width: (less than 100%) or in px } 

Establecer los márgenes izquierdo y derecho en automático especifica que deben dividir el margen disponible por igual. La alineación central no tiene efecto si el ancho es 100%.

y el segundo:

 .center-horizontal-align { display: table margin-left: auto; margin-right: auto; } 

Usar el segundo enfoque es conveniente cuando tiene varios elementos y desea que todos estén centrados en una celda de la tabla (es decir, varios botones en una celda).