Wie zentriere ich Bootstrap-Karussell-Beschriftungen vertikal auf responsiven Bildschirmen?

Vertikale Zentrierung von Bootstrap-Karussellbeschriftungen erreichen

Viele Benutzer haben Schwierigkeiten, Karussellbeschriftungen in Bootstrap vertikal auszurichten, obwohl sie versucht haben, sie horizontal zu positionieren. Dieses Problem tritt häufig auf, wenn die Beschriftung bei einer Änderung der Bildschirmgröße falsch ausgerichtet wird. Hier ist eine umfassende Lösung zur Lösung dieses Problems.

CSS-Transformation für vertikale Ausrichtung

Browserunterstützung für die TranslateY-Funktion von CSS ist weit verbreitet, einschließlich Internet Explorer 9. Diese Funktion ermöglicht vertikale Ausrichtung durch Verschieben von Elementen entlang der y-Achse. Fügen Sie die folgenden Zeilen zu Ihrem .carousel-caption-CSS hinzu:

top: 50%;
transform: translateY(-50%);

Die Standardeigenschaft „top“ der Beschriftung ist auf 0 gesetzt, aber indem Sie sie auf 50 % festlegen und ein negatives TranslateY von 50 % anwenden, zentrieren Sie die Beschriftung 50 % nach unten von der ursprünglichen oberen Position.

Beseitigung des zusätzlichen unteren Leerraums

Um den zusätzlichen unteren Leerraum zu entfernen, der durch standardmäßiges Bootstrap-CSS verursacht wird, fügen Sie die folgende Zeile in Ihre ein .carousel-caption CSS:

bottom: initial;

Diese Zeile setzt die untere Eigenschaft auf ihren ursprünglichen Zustand zurück und beseitigt dadurch den überschüssigen Platz.

Pixelunschärfe beheben

Wenn Elemente auf einem halben Pixel platziert werden, können sie unscharf erscheinen. Um dies zu verhindern, wenden Sie das folgende CSS auf das übergeordnete Element an, in diesem Fall .item:

-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;

Diese Einstellung verbessert die Art und Weise, wie Browser die Elemente darstellen, und sorgt so für Schärfe.

Ergebnis

Durch die Implementierung dieser CSS-Änderungen werden Ihre Karussellbeschriftungen vertikal zentriert und auf verschiedenen Bildschirmgrößen scharf angezeigt.

Überarbeitete HTML- und CSS-Snippets

<code class="html"><!-- Start JumboCarousel -->
<div id="jumboCarousel" class="carousel slide" data-ride="carousel">

    <!-- Indicators -->
    <ol class="carousel-indicators hidden-xs">
        <li data-target="#jumboCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#jumboCarousel" data-slide-to="1"></li>
        <li data-target="#jumboCarousel" data-slide-to="2"></li>
        <li data-target="#jumboCarousel" data-slide-to="3"></li>
    </ol><!-- end carousel-indicators -->

    <!-- Wrapper for Slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item active" id="slide1">
            <a href="#"><img src="http://placehold.it/1920x720&amp;text=Slide+1" alt="Slide 1"></a>
            <div class="carousel-caption">
                <h1>Check Out this Moose</h1>
                <p class="lead">This text is super engaging and makes you want to click the button.</p>
                <a href="#" class="btn btn-lg btn-primary">Learn More</a>
            </div><!-- end carousel-caption -->
        </div><!-- end slide1 -->
        <div class="item" id="slide2">
            <img src="http://placehold.it/1920x720&amp;text=Slide+2" alt="Slide 2">
            <div class="carousel-caption"></code>

Das obige ist der detaillierte Inhalt vonWie zentriere ich Bootstrap-Karussell-Beschriftungen vertikal auf responsiven Bildschirmen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!