Wie zentriere ich ein Inline-Block-Element, ohne die Reaktionsfähigkeit zu beeinträchtigen?

So zentrieren Sie ein Inline-Block-Element

Das Zentrieren eines Inline-Block-Elements kann aufgrund von Einschränkungen bei herkömmlichen Methoden schwierig sein. Es gibt jedoch eine einfache Lösung mit CSS.

Das Problem

Der Versuch, ein Inline-Block-Element mit margin-left und margin-right auto zu zentrieren, schlägt fehl funktionieren, weil Inline-Block-Elemente keine definierten Breiten haben. Das Festlegen der Anzeigeeigenschaft auf Block würde das Zentrierungsproblem lösen, aber die Reaktionsfähigkeit beeinträchtigen und die Hervorhebung des gesamten Elements verhindern.

Die Lösung

Um ein Inline-Block-Element zu zentrieren, Textausrichtung festlegen: auf den Container zentrieren. Dadurch wird das Inline-Block-Element horizontal im Container zentriert.

Beispiel

.container {
  text-align: center;
}

.equationElement {
  display: inline-block;
}

Demo

[Demo Hier verlinken]

Das obige ist der detaillierte Inhalt vonWie zentriere ich ein Inline-Block-Element, ohne die Reaktionsfähigkeit zu beeinträchtigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!