Heim > Web-Frontend > CSS-Tutorial > Wie zentriere ich Bootstrap-Karussell-Beschriftungen vertikal und positioniere sie leicht links?

Wie zentriere ich Bootstrap-Karussell-Beschriftungen vertikal und positioniere sie leicht links?

DDD
Freigeben: 2024-10-26 13:43:03
Original
773 Leute haben es durchsucht

How to Vertically Center Bootstrap Carousel Captions and Position Them Slightly to the Left?

Bootstrap-Karussellbeschriftungen vertikal ausrichten

Um die Karussellbeschriftung vertikal zu zentrieren und leicht links zu positionieren, können Sie die Transformations-CSS-Eigenschaften verwenden TranslateY-Funktion.

HTML:

<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>
Nach dem Login kopieren

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

Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage