Bootstrap jumbotron: Text vertikal und horizontal zentrieren

Kickflip

Hi,

ich möchte meinen Text vertikal und horizontal in einem Jumbotron zentrieren. Ich habe es bislang so:

Code

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <span class="display-5 align-self-center">Text in der Mitte.</span>
  </div>
</div>

Code

.jumbotron {
    background-image: url("images/baum.jpg");
    background-size: cover;
    height: 100vh;
    color: white;
  }

Ist bestimmt einfacher als gedacht, aber irgendwie bekomme ich es Immer nur horizontal hin, aber nicht vertikal.

LG und danke

MrMurphy

Flexbox sollte die Lösung sein. Füge mal folgende CSS-Anweisungen der Klasse .jumbotron hinzu:

Code

display: flex;
justify-content: center;
align-items: center;

Durch deine Verschachtelung und die Bootstrap-Auswirkungen auf .container musst du noch folgendes CSS hinzufügen:

Code

.jumbotron>.container {
   display: flex;
   justify-content: center;
   align-items: center;
}

sydneyrau

Hallo , das habe ich auch gemacht. vielen dank für deine antwort.

Jetzt mitmachen!