Voici plusieurs titres de questions et réponses en anglais qui correspondent au contenu de l'article : 1. **Pourquoi `margin: auto` ne fonctionne-t-il pas sur les éléments de bloc en ligne ?** 2. **Comment centrer les éléments de bloc en ligne sans « marge : auto » ?** 3. **Pourquoi Margin : Échec automatique pour Inline-Bl

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

En CSS, la propriété margin: auto est utilisée pour créer un espace même blanc autour d'un élément. Cependant, cela peut ne pas fonctionner lors de l'application de cet attribut sur un élément de bloc en ligne. En effet, les éléments de bloc en ligne circulent sur la page un peu comme les éléments de texte.

Lorsque vous attribuez le style display: inline-block à un élément, il commencera à circuler sur la page sous la forme d'un seul mot ou d'une seule image. Par conséquent, margin: auto ne peut pas créer un espace blanc uniforme car l'élément lui-même n'occupe pas tout l'espace horizontal.

Pour résoudre ce problème, vous devez définir l'alignement de l'élément conteneur sur centre (text-align: center) au lieu d'essayer de centrer directement l'élément de bloc en ligne. L'élément conteneur occupera tout l'espace horizontal et centrera l'élément bloc en ligne à l'intérieur.

Exemple de code corrigé :

<code class="css">#container {
    border: 1px solid black;
    display: inline-block;
    padding: 50px;
}
.MtopBig {
    margin: 75px auto;
    position: relative;
}
.center {
    text-align: center;
}</code>

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

En utilisant cette méthode, l'élément de bloc en ligne sera centré avec succès même s'il n'est plus directement contrôlé par l'attribut margin: auto.

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!