Bootstrap3 - 在h2內垂直對齊標簽

Question

我正面臨着Bootstrap3的一個有趣問題，其中標簽（“名稱”）似乎在<h2>標簽的底部對齊（請參閱圖像中的藍色框（由Chrome開發工具突出顯示）。

（從Bootstrap 3 文檔中將標簽放在標題內似乎是建議的方式）

我無法弄清楚如何在<h2>中心垂直對齊標簽。 垂直對齊似乎不適用於h2。 這個對另一個SO帖子的回答建議改變行高，但這似乎不是一個直觀的方法，因為它增加了h2兩側的填充（基本上增加了h2塊的大小）。

此標簽位於表格單元格內，其代碼如下：

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

（vcenter是我試圖用來垂直對齊的類）

Answer 1

看起來所有解決方案都教會您如何在<td>垂直居中.label 。 然而，他們沒有考慮到了頂部和底部 邊緣之間的差別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添加valign middle

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