Heim >Web-Frontend >CSS-Tutorial >Wie zentriere ich Inline-Block-Elemente, ohne „display: table;' zu verwenden?

Wie zentriere ich Inline-Block-Elemente, ohne „display: table;' zu verwenden?

DDD
DDDOriginal
2024-12-22 09:24:33864Durchsuche

How to Center Inline-Block Elements Without Using `display: table;`?

Anzeige mit Inline-Blockelementen zentrieren

Frage:

Wie können Sie Elemente mit Inline-Blockanzeigen zentrieren, ohne die Anzeige zu verwenden? : Tabelle;?

Analyse:

Der bereitgestellte Code verwendet display: table; um die Wrap-Klasse in der Mitte auszurichten. Der Benutzer bevorzugt jedoch die Verwendung von display: inline-block.

Lösung:

Um dieses Problem zu beheben, können Sie die folgenden Änderungen vornehmen:

body {
    text-align: center;
}

.wrap {
    display: inline-block;
}

Erklärung:

  • text-align: center; Wird auf das Body-Element angewendet, wird die gesamte Seite zentriert und sichergestellt, dass auch die Wrap-Klasse zentriert ist.
  • display: inline-block; denn die Wrap-Klasse ermöglicht es ihr, nur den Platz einzunehmen, den sie benötigt, und dennoch als Element auf Blockebene in der Mitte ausgerichtet zu sein.

Mit diesen Anpassungen werden die Inline-Blockelemente ohne Notwendigkeit horizontal zentriert zur Anzeige: Tabelle;.

Das obige ist der detaillierte Inhalt vonWie zentriere ich Inline-Block-Elemente, ohne „display: table;' zu verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
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