Wie zentriere ich einen Container vertikal in einem Bootstrap-Jumbotron?

Vertikale Ausrichtung eines Containers innerhalb eines Jumbotrons in Bootstrap

Die vertikale Ausrichtung eines Containers innerhalb eines Jumbotrons in Bootstrap kann durch verschiedene Ansätze erreicht werden, abhängig von der Ebene von Browser-Unterstützung erwünscht.

The Modern Way

Using Flexbox

Für moderne Browser, die Flexbox unterstützen, ist die Verwendung des Flexbox-Layoutmodells ein einfacherer und konsistenterer Ansatz. Indem Sie das folgende CSS zu Ihrer Seite hinzufügen:

.vertical-center {
  display: flex;
  align-items: center;
}

können Sie den Container mühelos vertikal im Jumbotron zentrieren. Stellen Sie sicher, dass Sie den Container mit einem Div der Klasse „.vertical-center“ umgeben.

Der altmodische Weg

Für ältere Browser

Für Browser ohne Flexbox-Unterstützung , eine Web-Standard-Technik mit vertikaler Ausrichtung erfordert etwas mehr Aufwand. Nutzen Sie die Eigenschaft text-align:center, um untergeordnete Elemente innerhalb des übergeordneten Elements horizontal auszurichten. Erstellen Sie ein div-Element, das ursprünglich von display: none ausgeblendet wurde und dessen Höhe gleich oder kleiner als die Höhe des übergeordneten Elements ist. Bearbeiten Sie nun die Ausrichtung mit „vertikal ausrichten“ für das gewünschte Element (z. B. den Container).

.vertical-center {
  text-align: center;
  font: 0/0 a;
}

.vertical-center .hidden-child {
  display: none;
  height: 100%;
}

.vertical-center.aligned .hidden-child {
  display: inline-block;
  vertical-align: middle;
}

Fügen Sie innerhalb des Containers eine Anzeige hinzu: inline-block; Eigenschaft zusammen mit Vertical-Align: Middle; um eine vertikale Zentrierung zu erreichen. Beachten Sie, dass hierfür etwas zusätzliches Markup erforderlich ist, um den Effekt von Flexbox nachzuahmen.

Überlegungen zum Browser

Bedenken Sie, dass Internet Explorer 8 und 9 die Inline-Block-Technik nicht richtig interpretieren und alternative Lösungen erfordern.

Das obige ist der detaillierte Inhalt vonWie zentriere ich einen Container vertikal in einem Bootstrap-Jumbotron?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!