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

您可以使用align-items: center;的flexbox垂直居中。

＆＃13;

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

＆＃13;

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

＆＃13;

引导程序中的垂直对齐文本

1 个答案: