Come posso allineare orizzontalmente i miei div?

Per qualche motivo i miei div non saranno centrati orizzontalmente in un div contenente:

.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>

E a volte c'è un div di riga con un solo div di blocco. Che cosa sto facendo di sbagliato?

Per ottenere ciò che stai cercando di fare:

Considera di usare display: inline-blockinvece di float.

Prova questo:

.row {
  width: 100%;
  text-align: center; // center the content of the container
}

.block {
  width: 100px;
  display: inline-block; // display inline with ability to provide width/height
}​

DEMO

• stare margin: 0 auto;insieme width: 100%è inutile perché il tuo elemento occuperà tutto lo spazio.

• float: leftfaranno fluttuare gli elementi a sinistra, fino a quando non ci sarà più spazio, quindi andranno su una nuova riga. Utilizzare display: inline-blockper essere in grado di visualizzare elementi in linea, ma con la possibilità di fornire dimensioni (al contrario di display: inlinedove larghezza / altezza vengono ignorate)

Gli allineamenti nei CSS erano stati un incubo. Fortunatamente, nel 2009 W3C ha introdotto un nuovo standard: Flexible Box . C'è un buon tutorial su di esso qui . Personalmente lo trovo molto più logico e più facile da capire rispetto ad altri metodi.

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

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

Utilizzando 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;
}

L'ultima tendenza è quella di utilizzare Flex o CSS Grid invece di utilizzare Float. Tuttavia, ancora circa l'1% dei browser non supporta Flex. Ma a chi importa davvero dei vecchi utenti di IE;)

Fiddle: controlla qui

Un altro esempio funzionante , utilizzando display: inline-blocketext-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;
}

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

Anche se non copre questa domanda (perché vuoi allineare le <div>s all'interno del contenitore) ma direttamente correlata: se volessi allineare solo un div in orizzontale potresti farlo:

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

Se gli elementi devono essere visualizzati su una riga e IE 6/7 non ha importanza, considera l'utilizzo di display: tablee display: table-cellinvece di float.

inline-blockporta a spazi orizzontali tra gli elementi e richiede l'azzeramento di tali spazi. Il modo più semplice è impostare font-size: 0per l'elemento genitore e quindi ripristinare font-sizeper gli elementi figlio che hanno display: inline-blockimpostando il loro font-sizesu un valore pxo rem.

Ho provato la risposta accettata, ma alla fine ho scoperto che:

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

Finora funziona bene.

Ho usato questi due approcci quando ho bisogno di gestire l'allineamento div orizzontale.
primo ( Allineamento al centro utilizzando la proprietà margin ):

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

L'impostazione dei margini sinistro e destro su auto specifica che devono dividere equamente il margine disponibile. L'allineamento al centro non ha effetto se la larghezza è del 100%.

e il secondo:

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

Utilizzare il secondo approccio è conveniente quando si hanno diversi elementi e si desidera che tutti siano centrati in una cella della tabella (cioè più pulsanti in una cella).