margin:auto; Funktioniert nicht bei Inline-Block-Elementen

In CSS, margin:auto; wird häufig verwendet, um Blockelemente auf einer Seite horizontal zu zentrieren. Bei Anwendung auf Inline-Block-Elemente wird diese Eigenschaft jedoch unwirksam.

Inline-Block-Elemente fließen inline wie Inline-Elemente in die Seite ein, können jedoch eine bestimmte Breite und Höhe haben. Dieses Verhalten führt zu Schwierigkeiten, wenn versucht wird, sie mithilfe von margin:auto; horizontal zu zentrieren.

Alter Code:

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

In diesem Code hat das #container-Element eine bestimmte Breite und löst das erwartete Zentrierungsverhalten aus.

Neuer Code:

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

Das Ändern der Anzeigeeigenschaft von #container in „inline-block“ ändert die Art und Weise, wie es mit Rändern interagiert. Inline-Block-Elemente verhalten sich nicht wie Blockelemente und können nicht mehr mit margin:auto; zentriert werden.

Lösung:

So zentrieren Sie ein Inline-Block-Element Verwenden Sie horizontal stattdessen die Eigenschaft text-align: center für das enthaltende Element:

.center {
    text-align: center;
}

Dadurch wird das Inline-Block-Element an der Mitte seines enthaltenden Blockelements ausgerichtet.