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 vous essayez de les centrer horizontalement à l'aide de margin:auto;.

Ancien code :

#container {
    /* Other styles... */
}
.center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

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

Nouveau code :

#container {
    /* Other styles... */
    display: inline-block;
}
.center {
    margin: 75px auto;
    position: relative;
}

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 :

.center {
    text-align: center;
}

Cela alignera l'élément inline-block au centre de l'élément block qui le contient.