垂直は、私がこのような状況きたブートストラップ

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を​​と一緒に使用すると、垂直方向の中央に配置できます。

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