Bonjour à tous,

Je travaille actuellement sur la mise en forme d'une page web fictif ma problématique est la suivante: j'ai créé à l'aide de boostrap un carousel faisant défiler 3 images je souhaiterai que la class "carousel-caption" qui est un texte (voir capture d'écran) soit centrée sur l'image et évidemment que le texte s'adapte aux différentes résolutions d'écran; quelqu'un saurait-il m'expliquer ce que je dois mettre en place afin de rendre tout cela possible ? (j'ai bien essayé avec des margin mais selon la résolution d'écran le texte se décale trop haut ou trop bas par rapport à l'image et je ne suis pas censée les utiliser..) Merci beaucoup !

Salut,

Tu veux centrer verticalement ?
Voici un lien qui te donnera quelques pistes :

https://www.web4college.com/questions/methods-for-vertical-centering.php

Si rien ne fonctionne, donnes nous les codes html et css de cette partie.

Du coup je te joins le code html :

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://www.wonder-trip.com/wp-content/uploads/Photo/Nouvelle-Zelande/seigneur-anneaux/Communaute-anneau-emyn-muil.jpg" class="d-block w-100" alt="...">
        <div class="carousel-caption">
            <h5>Dangerous fellows try to destroy the ring</h5>
            <p>Orcs, Goblins, Balrogs, protect your master Sauron !</p>
        </div>
    </div>
    <div class="carousel-item">
      <img src="https://www.wonder-trip.com/wp-content/uploads/Photo/Nouvelle-Zelande/seigneur-anneaux/Deux-tours-Montagne-destin.jpg" class="d-block w-100" alt="...">
        <div class="carousel-caption">
            <h5>Dangerous fellows try to destroy the ring</h5>
            <p>Orcs, Goblins, Balrogs, protect your master Sauron !</p>
        </div>
    </div>
    <div class="carousel-item">
      <img src="https://www.wonder-trip.com/wp-content/uploads/Photo/Nouvelle-Zelande/seigneur-anneaux/Communaute-anneau-kawarau-river-2.jpg" class="d-block w-100" alt="...">
        <div class="carousel-caption">
            <h5>Dangerous fellows try to destroy the ring</h5>
            <p>Orcs, Goblins, Balrogs, protect your master Sauron !</p>
        </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Je souhaiterais que mon carousel-caption (h5 +p) s'affiche au centre de mon image (les 3 images de mon carousel plus précisément) et si possible que la taille du texte s'adapte selon la résolution d'écran :/

Donne la CSS qui va avec.

Mais avec le lien que je t'ai donné tu devrais pouvoir t'en sortir.

Pour ta deuxième demande, il n'y a rien en CSS qui puisse adapter le texte en fonction de la résolution.
A part évidemment d'utiliser les media-querie pour changer le font-size selon la largeur du viewport.

Par contre il existe un plugin Jquery :

http://fittextjs.com/

J'utilise deux feuilles de style css (Boostrap et une autre que j'ai créée) le CSS de la class .carousel-caption (dans boostrap) est le suivant :

.carousel_caption
{
position: absolute;
right: 15%;
bottom: 20px;
left: 15%;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #fff;
text-align: center;
}

Avec ce code il faudrait rajouter un top:50% et un margin-top négatif de la moitié de la hauteur de l'élément.
Sauf qu'il faudrait connaître la hauteur et ce n'est pas le cas. On pourrait aller la chercher en JS.

PS Il n'y a pas cette option pour centrer verticalement dans Bootstrap ?

Essaie ça sur .carousel-caption :

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

-
Edité par Frogweb 16 septembre 2019 à 15:26:24

Certainement mais je ne la trouve pas ^^, ton css a fonctionné merci beaucoup!! (je vais maintenant essayer de comprendre pourquoi)