Comment centrer verticalement les légendes du carrousel Bootstrap sur les écrans réactifs ?

Réalisation du centrage vertical des légendes du carrousel Bootstrap

De nombreux utilisateurs rencontrent des difficultés à aligner verticalement les légendes du carrousel dans Bootstrap, malgré les efforts pour les positionner horizontalement. Ce problème survient souvent lorsque la légende est mal alignée à mesure que la taille de l'écran change. Voici une solution complète pour résoudre ce problème.

Transformation CSS pour l'alignement vertical

La prise en charge par les navigateurs de la fonction translationY de CSS est répandue, y compris Internet Explorer 9. Cette fonction permet alignement vertical en traduisant les éléments le long de l'axe y. Ajoutez les lignes suivantes à votre CSS .carousel-caption :

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

La propriété top par défaut de la légende est définie sur 0, mais en la définissant sur 50 % et en appliquant une translationY négative de 50 %, vous centrez le légende 50 % en dessous de la position supérieure d'origine.

Élimination de l'espace supplémentaire en bas

Pour supprimer l'espace inférieur supplémentaire causé par le CSS Bootstrap par défaut, incluez la ligne suivante dans votre .carousel-caption CSS :

bottom: initial;

Cette ligne réinitialise la propriété du bas à son état initial, éliminant ainsi l'espace excédentaire.

Correction du flou de pixel

Si des éléments sont placés sur un demi-pixel, ils peuvent apparaître flous. Pour éviter cela, appliquez le CSS suivant à l'élément parent, dans ce cas, .item :

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

Ce paramètre améliore la façon dont les navigateurs affichent les éléments, garantissant ainsi la netteté.

Résultat

La mise en œuvre de ces modifications CSS centrera verticalement les légendes de votre carrousel et les fera apparaître nettes sur différentes tailles d'écran.

Extraits HTML et CSS révisés

<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>

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!