Bootstrap3 - 在 h2 内垂直对齐标签

Question

我在使用 Bootstrap3 时遇到了一个有趣的问题，其中标签（“名称”）似乎与 <h2> 标记的底部对齐（参见图片中的蓝色框（由 Chrome 开发工具突出显示）。

（来自 Bootstrap 3 documentation 在标题中放置标签似乎是一种建议的方式）

我不知道如何在<h2> 的中心垂直对齐标签。垂直对齐似乎不适用于 h2。 This 对另一个 SO 帖子的回答建议更改 line-height 但这似乎不是一种直观的方法，因为它增加了 h2 两侧的填充（基本上增加了 h2 块的大小）。

这个标签在一个表格单元格内，代码如下：

<td class="text-right"><h2><span class="label label-default vcenter">Name</span></h2></td>

（vcenter 是我试图用来垂直对齐的类）

Answer 1

看起来所有解决方案都教您如何在<td> 中垂直居中您的.label。但是，它们都没有考虑到 top 和 bottom margins 之间的区别在h2 元素上。

基本上，您正在尝试垂直居中的东西不是垂直居中的。解决这个问题的唯一方法是提高标签的边距差异的一半，应该是.5rem。所以这很可能是这份工作：

h2 > .label { 
   position: relative;
   top: -.5rem;
}

如果没有，您有更强大的CSS 规则适用，我需要看看它们。随意将 -.5rem 更改为适合您的任何内容（rem 或 px）。

---

另一种方法是使用任何垂直居中技术并使td>h2 元素的顶部和底部边距相等：

td>h2 {  margin-top: 1rem; margin-bottom: 1rem; }

在此之后，大多数其他答案都会起作用。

Answer 2

您可以将display: flex 添加到标题标签，然后将其子元素垂直居中：

h2 {
  display: flex;
  align-items: center;
  
  /* Just for presentation */
  background: #ececec;
  height: 100px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<td class="text-right">
  <h2><span class="label label-default vcenter">Name</span></h2>
</td>

Answer 3

为td添加valignmiddle

<td valign="middle" class="text-right"><h2><span class="label label-default vcenter">Name</span></h2></td>

或

添加这个css

.table tbody>tr>td.vert-align
{
    vertical-align: middle;
}

<td  class="text-right vert-align"><h2><span class="label label-default vcenter">Name</span></h2></td>