Vertikal align Text in Bootstrap

Question

Ich habe diese Situation:

<div class="row">  
    <div class="col-sm-6 col-sm-offset-3 text-center" id="testo-centrale"> 
     <h1>IL BOX PIU' GRANDE DELLA TOSCANA<BR>CON AFFILIAZIONE CROSSFIT INC.</h1> 
     <h2>Prova Prova prova prova</h2> 
    </div>  
</div> 

CSS:

#testo-centrale {height:500px;} 

Die Texte, h1 und h2 sind zentriert in horizontal, aber ich möchte auch in vertical!

Danke Jungs!

Answer 1

Sie können flexbox mit align-items: center; vertikal zentrieren.

#testo-centrale { 
 
    height: 500px; 
 
    display: flex; 
 
    align-items: center; 
 
    flex-direction: column; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row"> 
 
    <div class="col-sm-6 col-sm-offset-3 text-center" id="testo-centrale"> 
 
    <h1>IL BOX PIU' GRANDE DELLA TOSCANA<BR>CON AFFILIAZIONE CROSSFIT INC.</h1> 
 
    <h2><?php the_field('testo_centrale_chi_siamo'); ?></h2> 
 
    </div> 
 
</div>