Question

我正面临着Bootstrap3的一个有趣问题，其中标签（“名称”）似乎在<h2>标签的底部对齐（请参阅图像中的蓝色框（由Chrome开发工具突出显示）。

（从Bootstrap 3 documentation标题中的标题似乎是建议的方式）

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

此标签位于表格单元格内，其代码如下：

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

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

Answer 1

看起来所有解决方案都会教您如何在.label中垂直居中<td>。但是，它们都没有考虑顶部和底部边距之间的区别在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

为valign

添加middle td

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

Bootstrap3 - 在h2内垂直对齐标签

3 个答案: