Wie zentriere ich Inline-Blockelemente mit unbekannter Breite?

Inline-Block-Elemente zentrieren

Es ist möglich, ein Inline-Block-Element mithilfe der text-align-Eigenschaft des Containerelements zu zentrieren.

Problemstellung

Bei Verwendung von CSS zum Formatieren eines Inline-Block-Elements Wenn die Breite unbekannt ist, funktionieren herkömmliche Zentriermethoden mit automatischen Rändern nicht. Das Festlegen einer festen Breite ist ebenfalls keine praktikable Option, da dies die ordnungsgemäße Hervorhebung des Elements verhindern würde.

Lösung

So zentrieren Sie ein Inline-Block-Element mit unbekannter Breite , setzen Sie einfach text-align: center; auf dem übergeordneten Container. Dadurch wird das Element horizontal innerhalb seines Containers zentriert.

Beispiel

Betrachten Sie den folgenden Code:

.container {
  text-align: center;
}

.equation-element {
  display: inline-block;
}

Dieser Code zentriert die Gleichung- Element innerhalb des Containers, unabhängig von seiner Breite.

Demo

[Live-Demo](https://example.com)

Das obige ist der detaillierte Inhalt vonWie zentriere ich Inline-Blockelemente mit unbekannter Breite?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!