## Wie positioniere ich eine Bootstrap-Karussell-Beschriftung vertikal und links?

So positionieren Sie eine Bootstrap-Karussell-Beschriftung vertikal und links

Die Karussell-Beschriftung von Bootstraps ist so konzipiert, dass sie sich automatisch horizontal im Karussell zentriert gleiten. Möglicherweise sind jedoch einige Anpassungen erforderlich, um die gewünschte vertikale Ausrichtung zu erreichen.

Vertikale Zentrierung der Beschriftung

Um die Beschriftung vertikal zu zentrieren, verwenden Sie die Transformationseigenschaft zusammen mit TranslateY Funktion. Fügen Sie den folgenden Stil zum .carousel-caption-CSS hinzu:

<code class="css">top: 50%;
transform: translateY(-50%);</code>

Dadurch wird die Beschriftung oben im Container verankert und dann vertikal um 50 % versetzt, um die Mittelposition zu erreichen.

Beseitigen von überschüssigem Platz unten

Der Standardstil von Bootstrap fügt etwas zusätzlichen Platz unter der Beschriftung hinzu. Um dies zu entfernen, fügen Sie Folgendes zum .carousel-caption-CSS hinzu:

<code class="css">bottom: initial;</code>

Unscharfe Elemente verhindern

Für Browser, die den Transformationsstil nicht unterstützen, Es wird empfohlen, dem übergeordneten Element .item den folgenden Stil hinzuzufügen:

<code class="css">-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;</code>

Dies verhindert verschwommene Elemente in Safari und Mobile Safari, wenn die fraktionierte Pixelpositionierung verwendet wird.

Beispiel

<code class="css">.carousel-caption {
  color: black;
  right: 58%;
  text-align: center;
  max-width: 500px;
  left: auto;
  top: 50%;
  transform: translateY(-50%);
  bottom: initial;
}</code>

Durch die Anwendung dieser Änderungen wird die Karussellbeschriftung vertikal zentriert und bleibt über verschiedene Bildschirmgrößen hinweg optisch stabil.

Das obige ist der detaillierte Inhalt von## Wie positioniere ich eine Bootstrap-Karussell-Beschriftung vertikal und links?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!