Question

我知道有这方面的答案，我尝试使用提供的答案进行故障排除。

然而，即使使用引导类＆＃34;文本中心＆＃34;我的h1标签仍然没有垂直位于屏幕中间，只是水平放置。这是带有目标css的html。感谢

＆＃13;

    #hero-area {
      background: url(../img/hero-area.png) fixed no-repeat;
      background-size: cover;
      color: #fff;
      overflow: hidden;
      position: relative;
    }
    
    #hero-area .overlay {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0px;
      left: 0px;
      background: #61D2B4;
      opacity: 0.9;
    
    }
    
    #hero-area .contents {
      padding: 600px 0 130px;
      }
    
    #hero-area .contents h1 {
      color: #fff;
      font-size: 60px;
      font-weight: 600;
      margin-bottom: 25px;
      letter-spacing: 5px;
    }

＆＃13;

    <div class="container">
         <div class="row justify-content-md-center">
              <div class="col-md-10">
                   <div class="contents text-center">
                        <h1 class="wow fadeInDown text-center" data-wow-duration="1000ms" data-wow-delay="0.3s">HART FERTILITY CLINIC</h1>
                           <p class="lead  wow fadeIn" data-wow-duration="1000ms" data-wow-delay="400ms">HOLISTIC ASSISTED REPRODUCTION TREATMENT
                           <br>
                           <br>CAPE TOWN</p>
                   </div>
              </div>
         </div>
    </div>

＆＃13;

Answer 1

如果您正在使用最新的Twitter-Bootstrap，您可以轻松查看网格的文档。在那里你找到一个名为：

的课程

align-items-center

将您的内容垂直居中。

了解更多信息： https://getbootstrap.com/docs/4.0/layout/grid/#vertical-alignment

居中对齐主图像/标题boostrap上的文本

1 个答案: