Bootstrap jumbotron: Text vertikal und horizontal zentrieren

  • 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

  • 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;
    }

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!