Heim  >  Artikel  >  Web-Frontend  >  Wie kann man eine Bootstrap-Karussell-Beschriftung vertikal zentrieren und links ausrichten?

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

DDD
DDDOriginal
2024-10-30 09:33:27423Durchsuche

How to Vertically Center and Left-Align a Bootstrap Carousel Caption?

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!

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