Comment centrer des divisions horizontalement dans un conteneur ?

Alignement horizontal des divs dans un conteneur

Lorsque l'on tente de centrer des divs horizontalement dans un conteneur, on peut rencontrer des difficultés. Cela est souvent dû au comportement par défaut de float: left.

Pour résoudre ce problème, pensez à utiliser display: inline-block au lieu de float pour les divs. Cette technique élimine le besoin de calcul manuel des marges et permet un alignement réactif.

Par exemple, dans le CSS suivant :

<code class="css">.row {
  width: 100%;
  margin: 0 auto;
}
.block {
  width: 100px;
  display: inline-block;
}</code>

Le div avec la classe "block" se comportera comme un élément en ligne et s'alignera horizontalement dans le div du conteneur avec la classe "row".

De plus, dans les cas où il existe un div de ligne avec un seul div de bloc, vous pouvez le centrer en utilisant text-align: center :

<code class="css">.row-with-single-block {
  text-align: center;
}</code>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!