## Comment positionner une légende de carrousel Bootstrap verticalement et à gauche ?

Comment positionner une légende de carrousel Bootstrap verticalement et à gauche

La légende du carrousel de Bootstrap est conçue pour se centrer automatiquement horizontalement dans le carrousel glisser. Cependant, certains ajustements peuvent être nécessaires pour obtenir l'alignement vertical souhaité.

Centrage vertical de la légende

Pour centrer la légende verticalement, utilisez la propriété transform avec le translationY fonction. Ajoutez le style suivant au CSS .carousel-caption :

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

Cela ancre la légende en haut de son conteneur, puis la décale verticalement de 50 % pour atteindre la position centrale.

Élimination de l'espace inférieur excessif

Le style par défaut de Bootstrap ajoute un espace supplémentaire sous la légende. Pour supprimer cela, ajoutez ce qui suit au CSS .carousel-caption :

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

Prévention des éléments flous

Pour les navigateurs qui ne prennent pas en charge le style de transformation, il est recommandé d'ajouter le style suivant à l'élément parent .item :

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

Cela évite les éléments flous dans Safari et Mobile Safari lors de l'utilisation du positionnement fractionnaire des pixels.

Exemple

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

En appliquant ces modifications, la légende du carrousel sera centrée verticalement et restera visuellement stable sur différentes tailles d'écran.

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!