使文本与HTML中的标题标签（h2）对齐

Question

我有以下代码：

<div class="row margin-bt-5">
   <div class="col-xs-4 ft-bold">Name  &nbsp;:</div>
   <div class="col-xs-8">
      <h2>Content</h2>
   </div>
</div>

但是因为我使用的字体大小不同，所以它们没有垂直对齐。我明白了：

如何将“名称”的中间部分与“内容”的中间部分对齐？谢谢

Answer 1

您可以将flex用于行。

.margin-bt-5 {
  display: flex;
  align-items: center;
}

.margin-bt-5 h2 {
  margin-top: 10px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row margin-bt-5">
   <div class="col-xs-4 ft-bold">Name  &nbsp;:</div>
   <div class="col-xs-8">
      <h2>Content</h2>
   </div>
</div>

Answer 2

.margin-bt-5 h2{
    margin-top: 0px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row margin-bt-5">
   <div class="col-xs-4 ft-bold">Name  &nbsp;:</div>
   <div class="col-xs-8">
      <h2>Content</h2>
   </div>
</div