Вертикальный текст Выровнять в загрузчике

Question

Я эту ситуацию:

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

Тексты, h1 и h2, сосредоточены в horizontal, но я хочу также в vertical!

Спасибо, ребята!

Answer 1

Вы можете использовать flexbox с align-items: center; в центре по вертикали.

#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>