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

marge:auto; Ne fonctionne pas sur les éléments de bloc en ligne

En CSS, margin:auto; est couramment utilisé pour centrer horizontalement des éléments de bloc sur une page. Cependant, lorsqu'elle est appliquée aux éléments de bloc en ligne, cette propriété devient inefficace.

Les éléments de bloc en ligne s'écoulent dans la page en ligne comme les éléments en ligne, mais peuvent avoir une largeur et une hauteur spécifiques. Ce comportement crée des difficultés lorsque l'on essaie de les centrer horizontalement à l'aide de margin:auto;.

Ancien code :

<code class="css">#container {
    /* Other styles... */
}
.center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}</code>

Dans ce code, l'élément #container a un largeur spécifique et déclenche le comportement de centrage attendu.

Nouveau code :

<code class="css">#container {
    /* Other styles... */
    display: inline-block;
}
.center {
    margin: 75px auto;
    position: relative;
}</code>

La modification de la propriété d'affichage de #container en inline-block modifie la façon dont elle interagit avec les marges. Les éléments de bloc en ligne ne se comportent pas comme des éléments de bloc et perdent la capacité d'être centrés à l'aide de margin:auto;.

Solution :

Pour centrer un élément de bloc en ligne horizontalement, utilisez plutôt la propriété text-align: center sur son élément conteneur :

<code class="html"><div class="center">
  <div class="MtopBig" id="container"></div>
</div></code>

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

Cela alignera l'élément inline-block au centre de son élément de bloc conteneur.

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!