Wie kann man eine Bootstrap-Karussell-Beschriftung vertikal zentrieren und links ausrichten?

Positionieren einer Bootstrap-Karussell-Beschriftung: Vertikal zentriert und linksbündig

Um eine Bootstrap-Karussell-Beschriftung vertikal zu zentrieren und leicht links zu positionieren, ist eine Kombination aus CSS-Eigenschaften können implementiert werden.

CSS-Lösung

Innerhalb des CSS sollte folgender Stil hinzugefügt werden:

<code class="css">.carousel-caption {
  top: 50%;
  transform: translateY(-50%);
  bottom: initial;
}

.item {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}</code>

Erklärung

• top: 50 %;: Positioniert die Beschriftung vertikal in der Mitte.
• transform: translatorY(-50 %);: Verschiebt die Beschriftung um die Hälfte ihrer Höhe nach oben, was zu einer vertikalen Zentrierung führt.
• bottom: initial;: Entfernt den standardmäßigen unteren Abstand, der auf Karussellbeschriftungen angewendet wird.
• transform-style: Preserve-3d;: Verhindert Unschärfe bei Elementen, die auf halben Pixeln platziert sind.

Mit Durch diese CSS-Anpassungen bleibt die Karussellbeschriftung vertikal zentriert und leicht links ausgerichtet, sodass unabhängig von der Bildschirmgröße eine einheitliche Positionierung gewährleistet ist.

Das obige ist der detaillierte Inhalt vonWie kann man eine Bootstrap-Karussell-Beschriftung vertikal zentrieren und links ausrichten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!