Question

我对CSS和HTML的了解最少，并且想要实现以下目标：我正在使用使用Bootstrap的WordPress主题，并且我想创建一个包含两列的行。左列具有图像，右列具有应垂直居中的标题。我正在使用列简码

    <div class="row">
        <div class="col-6">
            IMAGE
        </div>
        <div class="col-6">
            HEADLINE
        </div>
    </div>

有人可以帮助我如何使标题垂直居中吗？谢谢您的帮助。

Answer 1

如果您使用的是Bootstrap 4。您可以使用以下代码段

<div class="row">
  <div class="col-6">
   <img src="" alt="">
 </div>
 <div class="col-6 d-flex align-items-center">
   Your heading
  </div>
</div>

如果您使用的是Bootstrap 3.x.x。您可以使用以下代码段

<div class="row">
  <div class="col-sm-6">
   <img src="" alt="">
 </div>
 <div class="col-sm-6 flex-vcenter">
   Your heading
  </div>
</div>

CSS（仅当Bootstrap ver为3 时）

.flex-vcenter {
   display: flex
   align-items: center
 }

在引导列内垂直对齐文本

1 个答案: