Comment centrer des divisions horizontalement : un guide détaillé

Alignement horizontal des divs : un guide détaillé

Lorsque vous essayez de centrer des divs horizontalement, il est courant de rencontrer des problèmes d'alignement. Cet article abordera ce problème spécifique et fournira une solution.

Énoncé du problème :

Comme le montre l'extrait de code ci-dessous, un div de conteneur a des divs qui ne parviennent pas à se centrer. horizontalement :

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

De plus, il peut y avoir des cas où un div de ligne ne contient qu'un seul div de bloc.

Solution :

Pour aligner divs horizontalement, pensez à utiliser la propriété display: inline-block au lieu de float. Cette approche offre un meilleur contrôle sur la disposition de vos div et les aide à se centrer horizontalement dans leur conteneur.

CSS :

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

Conclusion :

En tirant parti de la propriété display: inline-block, vous pouvez centrer efficacement les divs horizontalement et résoudre les problèmes d'alignement décrits dans l'énoncé du problème. Cette solution simple mais efficace peut améliorer la mise en page et l'attrait esthétique de vos pages Web.

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!