Comment puis-je aligner horizontalement mes divs?

Pour une raison quelconque, mes divs ne seront pas centrés horizontalement dans un div contenant:

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

Et parfois, il y a une ligne div avec un seul bloc div dedans. Qu'est-ce que je fais mal?

Pour réaliser ce que vous essayez de faire:

Pensez à utiliser display: inline-blockau lieu de float.

Essaye ça:

.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

• avoir margin: 0 auto;avec width: 100%est inutile car votre élément prendra tout l'espace.

• float: leftfera flotter les éléments vers la gauche, jusqu'à ce qu'il n'y ait plus d'espace, ainsi ils iront sur une nouvelle ligne. Utilisez display: inline-blockpour pouvoir afficher des éléments en ligne, mais avec la possibilité de fournir une taille (par opposition à l' display: inlineendroit où la largeur / hauteur est ignorée)

Les alignements dans CSS avaient été un cauchemar. Heureusement, un nouveau standard est introduit par le W3C en 2009: la boîte flexible . Il y a un bon tutoriel à ce sujet ici . Personnellement, je trouve cela beaucoup plus logique et plus facile à comprendre que les autres méthodes.

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

Utilisation de 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 dernière tendance est d'utiliser Flex ou CSS Grid au lieu d'utiliser Float. Cependant, certains navigateurs à 1% ne prennent toujours pas en charge Flex. Mais qui se soucie vraiment des anciens utilisateurs d'IE de toute façon;)

Violon: Vérifiez ici

Un autre exemple de travail , en utilisant display: inline-blockettext-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;
}

Violon: http://jsfiddle.net/fNvgS/

Bien que ne couvrant pas cette question (car vous voulez aligner les <div>s à l'intérieur du conteneur) mais directement liés: si vous souhaitez aligner une seule div horizontalement, vous pouvez le faire:

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

Si les éléments doivent être affichés sur une seule ligne et que IE 6/7 n'a pas d'importance, envisagez d'utiliser display: tableet display: table-cellau lieu de float.

inline-blockconduit à des écarts horizontaux entre les éléments et nécessite de les réduire à zéro. La façon la plus simple est de définir font-size: 0pour l' élément parent, puis restaurer font-sizedes éléments enfants qui ont display: inline-blocken leur fixant font-sizeà une pxou remvaleur.

J'ai essayé la réponse acceptée, mais j'ai finalement trouvé que:

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

Fonctionne bien jusqu'à présent.

J'ai utilisé ces deux approches lorsque j'ai besoin de gérer l'alignement div horizontal.
first ( Alignement au centre à l'aide de la propriété margin ):

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

La définition des marges gauche et droite sur auto spécifie qu'elles doivent diviser la marge disponible également. L'alignement au centre n'a aucun effet si la largeur est de 100%.

et le deuxième:

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

L'utilisation de la deuxième approche est pratique lorsque vous avez plusieurs éléments et que vous voulez qu'ils soient tous centrés dans une cellule du tableau (c'est-à-dire plusieurs boutons dans une cellule).