web-dev-qa-db-fra.com

Centrer le texte verticalement dans le carrousel Bootstrap

J'ai du mal à créer un carrousel dans Bootstrap 4 avec un texte centré à la fois horizontalement et verticalement.

J'ai créé le bootply avec un carrousel, mais le texte apparaît dans le coin supérieur gauche au lieu de se trouver au milieu de l'écran.

<div class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <h1>Text 1</h1>
    </div>
    <div class="carousel-item">
      <h1>Text 2</h1>
    </div>
    <div class="carousel-item">
      <h1>Text 3</h1>
    </div>´
  </div>
</div>
htmlcsstwitter-bootstrapbootstrap-4
5
Jamgreen

Vous pouvez utiliser les classes d’utilitaires Bootstrap 4 ( pas de CSS supplémentaire est nécessaire) ...

https://www.codeply.com/go/ORkdymGWzM

<div class="carousel slide" data-ride="carousel">
    <div class="carousel-inner text-center">
        <div class="carousel-item active">
            <div class="d-flex h-100 align-items-center justify-content-center">
                <h1>Text 1</h1>
            </div>
        </div>
        <div class="carousel-item">
            <div class="d-flex h-100 align-items-center justify-content-center">
                <h1>Text 2</h1>
            </div>
        </div>
        <div class="carousel-item">
            <div class="d-flex h-100 align-items-center justify-content-center">
                <h1>Text 3</h1>
            </div>
        </div>
    </div>
</div>
2
Zim

Vous pouvez utiliser l'affichage display: table; et display: table-cell; avec vertical-align: middle;

.carousel-item {
    display: table;
    text-align: center;
}

.carousel-item h1 {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

La clé ici est vertical-align: middle; qui ne fonctionne que si un div est une table.

En ce qui concerne l'alignement horizontal, le text-align: center; passe à .carousel-item. J'ai mis à jour mon code.

0
Konstantinos Koletsas

Changez votre CSS pour h1 comme suit:

.carousel-item h1 {
  position: absolute;
  margin: 0;
  color: white;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
0
Gerard

Il vous manque simplement ceci:

<div class="carousel-caption">

Avant le <h1>Text 1</h1> Donc, c'est comme ça:

<div class="carousel-item active">
  <div class="carousel-caption">
    <h1>Text 1</h1>
  </div>
</div>
0
Asjon