Maison >interface Web >tutoriel CSS >Comment centrer verticalement les légendes du carrousel Bootstrap et les positionner légèrement vers la gauche ?
Alignement vertical des légendes du carrousel Bootstrap
Pour centrer verticalement la légende du carrousel et la positionner légèrement vers la gauche, vous pouvez utiliser la propriété CSS transform Fonction TranslateY.
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&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&text=Slide+2" alt="Slide 2"> <div class="carousel-caption"></code>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!