Comment puis-je centrer verticalement mon texte dans un "col-sm-12" avec Bootstrap 4?

Question

J'essaie d'avoir le texte centré verticalement dans tout l'espace jaune. J'ai essayé d'implémenter le "align-items-center" sur la ligne, comme suggéré dans leur documentation, ainsi que la classe "my-auto". Je ne suis pas sûr de ce que je fais mal.

#heading-cont { 
 
    background-color: #F7CE38; 
 
    height: 10rem; 
 
} 
 

 
.white { 
 
    color: white; 
 
} 
 

 
.title { 
 
    font-family: 'Montserrat', Arial, sans-serif; 
 
    text-transform: uppercase; 
 
    font-weight: 300; 
 
} 
 

 
.description { 
 
    font-family: 'Pathway Gothic One', Arial, sans-serif; 
 
    font-weight: 400; 
 
    text-transform: uppercase; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> 
 
<section class="header"> 
 
    <div class="container-fluid" id="heading-cont"> 
 
    <div class="row"> 
 
     <div class="col-sm-12 my-auto"> 
 
     <h1 class="title white text-center">Digital</h1> 
 
     <h4 class="description white text-center">This is the description.</h4> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

CodePen Demo

Answer 1

(je suppose que vous vouliez dire "verticalement centre", car il n'y a qu'une seule colonne dans votre exemple, il n'y a rien pour l'aligner avec.)

La hauteur minimale de 10rem est affectée au container-fluid dans Bootstrap. Pour centrer verticalement votre texte, vous devez étirer le row pour le match.

#heading-cont > .row { 
    height: 100%; 
} 

Answer 2

Vous devrez donner la ligne une hauteur de 100% pour qu'il y ait place pour centrer le texte dans

.row { 
    height: 100%; 
} 

Answer 3

Vous pouvez ajouter une classe (dans mon exemple .x) à #heading-cont et appliquer le CSS suivant à elle pour en faire un conteneur FlexBox et centrer verticalement son contenu:

.x { 
    display:flex; 
    flex-direction: column; 
    justify-content: center; 
} 

https://codepen.io/anon/pen/GMdazJ

Answer 4

Tout d'abord, utilisez le bootstrap 4 classes comme ils étaient destinés à être utilisés: class = « d-flex-colonne flex justify-centre de contenu », et vous n'avez pas besoin d'ajouter de la hauteur la ligne. Ne créez pas de règles CSS séparées qui répètent simplement les classes d'utilitaires existantes si vous n'en avez pas besoin.

/*containers*/ 
 

 
.container-fluid { 
 
    padding: 0; 
 
} 
 

 
#heading-cont { 
 
    background-color: #F7CE38; 
 
    height: 10rem; 
 
} 
 

 
#subheading { 
 
    height: 8rem 
 
} 
 

 
#heading-cont > .row { 
 
/* height: 10rem;*/ 
 
} 
 

 
#subheading > .row { 
 
    /*height: 100%;*/ 
 
} 
 

 
/*type + color*/ 
 

 
h1 { 
 
    font-size: 3rem !important; 
 
} 
 

 
h3 { 
 
    font-size: 2rem !important; 
 
} 
 

 
.white { 
 
    color: white; 
 
} 
 

 
.margin-b { 
 
    margin-bottom: 2rem; 
 
} 
 

 

 
.title { 
 
    font-family: 'Montserrat', Arial, sans-serif; 
 
    text-transform: uppercase; 
 
    font-weight: 300; 
 
} 
 

 
.description { 
 
    font-family: 'Pathway Gothic One', Arial, sans-serif; 
 
    font-weight: 400; 
 
    text-transform: uppercase; 
 
} 
 

 
/*social-prof*/ 
 

 
.box { 
 
    background-color: #E0E0E0; 
 
    height: 20rem; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> 
 
<section class="header"> 
 
    <div class="container-fluid d-flex flex-column justify-content-center" id="heading-cont"> 
 
    <div class="row"> 
 
     <div class="col-sm-12"> 
 
     <h1 class="title white text-center">Digital</h1> 
 
     <h3 class="description white text-center">This is the description.</h3> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section> 
 

 
<section class="social-prof"> 
 
    <div class="container-fluid d-flex flex-column justify-content-center" id="subheading"> 
 
    <div class="row"> 
 
     <div class="col-sm-12"> 
 
     <h1 class="title text-center">Branding</h1> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="container-fluid" id="bu"> 
 
    <div class="row"> 
 
     <div class="col-sm-12"> 
 
     <div class="box"> 
 
      <div class="layer"> 
 
      <h3 class="description white text-center margin-b">Small Business Services</h3> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

https://codepen.io/anon/pen/oGyrPg