Pourquoi mes divs ne sont-ils pas centrés horizontalement dans le div contenant ?

Centrage de l'alignement horizontal des DIV

Vous avez rencontré un problème où vos divs ne parviennent pas à s'aligner horizontalement dans le div contenant. Voici une requête et une solution courantes :

Question

Pourquoi mes divs ne sont-ils pas centrés horizontalement dans le div contenant ?

Exemple HTML :

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

Exemple CSS :

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

Solution

À Pour obtenir un centrage horizontal, pensez à utiliser display: inline-block au lieu de float. Cette méthode permet aux divs de se comporter comme des éléments en ligne tout en conservant les propriétés au niveau du bloc telles que la largeur et la hauteur.

CSS mis à jour :

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

Avec cette modification, vos divs doivent s'aligner horizontalement dans le contenant div.

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!