Pourquoi « margin : auto ; » ne centre-t-il pas les éléments de bloc en ligne horizontalement ?

marge:auto; dans les éléments Inline-Block

Lors de l'application de margin:auto; à un div avec affichage en bloc en ligne, il se peut qu'il ne centre pas le div horizontalement comme prévu. Cela se produit parce que les éléments de bloc en ligne se comportent comme des éléments en ligne, circulant le long de la page.

Dans le code fourni :

Ancien code (fonctionne)

<code class="css">#container {
  width: 200px;
  ...
}</code>

Le div reçoit une largeur spécifique, garantissant qu'il tient dans son conteneur parent.

Nouveau code (ne fonctionne pas)

<code class="css">#container {
  display: inline-block;
  ...
}</code>

Paramètre display : inline-block permet au div de rétrécir et de s'agrandir en fonction de son contenu, conduisant à son alignement incorrect.

Pour centrer le div, le code nécessite :

Solution

1. Ajouter text-align: center; à l'élément contenant (.center dans l'exemple).

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

Cela garantit que le div du bloc en ligne est centré.

<code class="html"><div class="center">
  <div class="MtopBig" id="container">...</div>
</div></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!