¿Cómo puedo alinear horizontalmente mis divs?

Question

Por alguna razón mis divs no se centrarán horizontalmente en un div que contiene:

.row { 
 
    width: 100%; 
 
    margin: 0 auto; 
 
} 
 
.block { 
 
    width: 100px; 
 
    float: left; 
 
}

<div class="row"> 
 
    <div class="block">Lorem</div> 
 
    <div class="block">Ipsum</div> 
 
    <div class="block">Dolor</div> 
 
</div>

Y a veces hay un div fila con un solo bloque div en ella. ¿Qué estoy haciendo mal?

Answer 1

para lograr lo que estamos tratando de hacer:

considerar el uso de display: inline-block en lugar de float.

Answer 2

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 
}​ 

DEMO

• tener margin: 0 auto; junto con width: 100% es inútil porque el elemento va a tener todo el espacio.

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

Answer 3

Si los elementos se van a mostrar en una línea (y IE6/7 hacer no importa), considere usar display: table/table-cell en lugar de float.

Usando inline-block conduce a brechas entre los elementos horizontales y por tanto requiere tomar otras medidas para que las brechas de cero (la forma más sencilla es establecer font-size: 0 para el elemento de matriz y luego restaurar font-size de elementos secundarios que tienen display: inline-block).

Answer 4

Otra working example, utilizando display: inline-block y text-align: center

HTML:

<div class='container'> 
    <div class='row'> 
     <div class='btn'>Hello</div> 
     <div class='btn'>World</div> 
    </div> 
    <div class='clear'></div> 
</div> 

CSS:

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

violín: http://jsfiddle.net/fNvgS/

Answer 5

Aunque no cubrir esta pregunta (ya que desea alinear los <div> s dentro del contenedor) sino directamente relacionados: si desea alinear sólo un div horizontal que podría hacer esto:

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

Answer 6

Probé la respuesta aceptada , pero finalmente descubrió que:

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

Funciona bien hasta el momento.

Answer 7

He usado estos dos enfoques cuando necesito manejar la alineación div horizontal.
primero (Center Aligning Using the margin Property):

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

Configuración de los márgenes izquierdo y derecho para auto especifica que se debe dividir el margen disponible por igual. La alineación central no tiene efecto si el ancho es 100%.

y la segunda:

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

Utilizando el segundo método es conveniente cuando usted tiene varios elementos y desea que todos ellos a estar centrado en una celda de la tabla (es decir, varios botones en una celda.).

Answer 8

Las alineaciones en CSS han sido una pesadilla. Afortunadamente, el W3C introdujo un nuevo estándar en 2009: Flexible Box. Hay un buen tutorial al respecto here. 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; 
 
}

<div class="row"> 
 
    <div class="block">Lorem</div> 
 
    <div class="block">Ipsum</div> 
 
    <div class="block">Dolor</div> 
 
</div>

Answer 9

Usando FlexBox:

<div class="row"> 
    <div class="block">Lorem</div> 
    <div class="block">Ipsum</div> 
    <div class="block">Dolor</div> 
</div> 

.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 utilizar Flex o CSS en lugar de utilizar la red de flotador. Sin embargo, todavía un 1% de navegadores no son compatibles con Flex. Pero que realmente se preocupa por los usuarios antiguos de IE de todos modos;)

violín: Check Here