Heim > Web-Frontend > CSS-Tutorial > Wie zentriere ich Inline-Blockelemente mit unbekannter Breite?

Wie zentriere ich Inline-Blockelemente mit unbekannter Breite?

Barbara Streisand
Freigeben: 2024-11-08 18:54:02
Original
355 Leute haben es durchsucht

How to Center Inline-Block Elements with Unknown Width?

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;
}
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage