it-swarm-eu.dev

Text in der Mitte des Bootstrap-Karussells vertikal zentrieren

Ich habe Probleme beim Erstellen eines Karussells in Bootstrap 4, dessen Text sowohl horizontal als auch vertikal zentriert ist.

Ich habe das bootply mit einem Karussell erstellt, aber der Text ist nur in der oberen linken Ecke anstatt in der Mitte des Bildschirms.

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

Sie können die Bootstrap 4-Dienstprogrammklassen verwenden ( kein zusätzliches CSS ist erforderlich) ...

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

Sie können display: table; und display: table-cell; zusammen mit vertical-align: middle; anzeigen.

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

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

Der Schlüssel hier ist vertical-align: middle;, der nur funktioniert, wenn ein div eine Tabelle ist.

In Bezug auf die horizontale Ausrichtung geht der text-align: center; zu .carousel-item. Ich habe meinen Code aktualisiert.

Ändern Sie Ihr CSS für h1 folgendermaßen:

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

Sie vermissen einfach das:

<div class="carousel-caption">

Vor dem <h1>Text 1</h1> Es ist also so:

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