Como posso alinhar horizontalmente meus divs?

Por alguma razão, meus divs não centralizam horizontalmente em um div que o contém:

.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 às vezes há uma linha div com apenas um bloco div nela. O que estou fazendo de errado?

Para conseguir o que você está tentando fazer:

Considere usar em display: inline-blockvez de float.

Experimente isto:

.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

• Ter margin: 0 auto;junto com width: 100%é inútil porque seu elemento ocupará todo o espaço.

• float: leftirá flutuar os elementos para a esquerda, até que não haja mais espaço, então eles irão em uma nova linha. Use display: inline-blockpara ser capaz de exibir elementos embutidos, mas com a capacidade de fornecer tamanho (ao contrário de display: inlineonde largura / altura são ignoradas)

Os alinhamentos em CSS foram um pesadelo. Felizmente, um novo padrão é introduzido pelo W3C em 2009: Caixa Flexível . Há um bom tutorial sobre isso aqui . Pessoalmente, acho muito mais lógico e fácil de entender do que outros métodos.

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

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

A tendência mais recente é usar Flex ou CSS Grid em vez de Float. No entanto, alguns navegadores de 1% ainda não suportam Flex. Mas quem realmente se importa com os usuários antigos do Internet Explorer;)

Fiddle: Verifique aqui

Outro exemplo de trabalho , usando 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/

Embora não abordando esta questão (porque você deseja alinhar os <div>s dentro do contêiner), mas diretamente relacionado: se você quisesse alinhar apenas um div horizontalmente, você poderia fazer isso:

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

Se os elementos devem ser exibidos em uma linha e o IE 6/7 não importa, considere usar display: tablee em display: table-cellvez de float.

inline-blockleva a lacunas horizontais entre os elementos e exige zerar essas lacunas. A maneira mais simples é definir o font-size: 0elemento pai e, em seguida, restaurar font-sizeos elementos filho display: inline-blockconfigurando seu valor font-sizepara um pxou rem.

Tentei a resposta aceita, mas acabei descobrindo que:

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

Funciona bem até agora.

Usei essas duas abordagens quando preciso lidar com o alinhamento horizontal de div.
primeiro ( Alinhamento ao centro usando a propriedade de margem ):

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

Definir as margens esquerda e direita como automáticas especifica que elas devem dividir a margem disponível igualmente. O alinhamento ao centro não tem efeito se a largura for 100%.

e o segundo:

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

Usar a segunda abordagem é conveniente quando você tem vários elementos e deseja que todos eles sejam centralizados em uma célula da tabela (ou seja, vários botões em uma célula).