将文本与 HTML 中的标题标签（h2）对齐 [重复]答案

【问题标题】：Align text with title tag (h2) in HTML [duplicate]将文本与 HTML 中的标题标签（h2）对齐 [重复]
【发布时间】：2019-01-07 13:31:41
【问题描述】：

我有这个代码：

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

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

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

【问题讨论】：

...而您想要实现...什么？
vertical-align - 谷歌
没用
标题标签默认有边距。试着把margin: 0 换成h2。
你试过行高吗？

标签： html css web

【解决方案1】：

.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

【讨论】：

【解决方案2】：

您可以使用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>

【讨论】：

这个解决方案并不完全是我想要的，因为内容仍然低于名称，但在我的情况下已经足够好了。谢谢
@bobier2 请立即尝试。我没有看到 Bootstrap CSS。
完美！非常感谢