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

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

Les éléments de bloc en ligne se comportent différemment des éléments de bloc en ce qui concerne la marge automatique. Dans les éléments de bloc, margin:auto; centre l'élément horizontalement dans son conteneur parent. Cependant, dans les éléments de bloc en ligne, margin:auto; n'a aucun effet.

Exemple :

<code class="css">#container {
    border: 1px solid black;
    display: inline-block;
    padding: 50px;
}</code>

Dans cet exemple, l'élément conteneur est défini comme inline-block. Lorsque margin:auto; est appliqué à l'élément, il ne centre pas le conteneur dans son conteneur parent.

Solution :

Pour centrer un élément de bloc en ligne, vous pouvez utiliser text- align : centre sur l'élément parent.

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

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

Maintenant, l'élément conteneur sera centré horizontalement dans le div central.

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!