Bootstrap3 - 在h2内垂直对齐标签 [英] Bootstrap3 - vertically align label within h2

问题描述

我在Bootstrap3中遇到了一个有趣的问题，其中标签（Name）似乎与< h2> 标签的底部对齐（请参阅蓝色（由Chrome开发工具突出显示）。

（From Bootstrap 3 将标签放入标题内似乎是一种建议的方式）

我无法弄清楚如何垂直对齐< h2> 中间的标签，vertical-align看起来并不适用于h2。这对另一个SO帖子的答案建议改变行高，但这似乎不是一种直观的方法，因为它增加了填充双方的h2（基本上增加h2区块的大小）。

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

 < td class = text-right>< h2>< span class =label label-default vcenter>名称< / span>< / h2>< / td> 
  

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

解决方案

它看起来像所有的解决方案教你如何垂直居中 .label 在< TD> 。但是，它们都没有考虑 top 和 底部 边距之间的差异在 h2 元素上。

基本上，您正尝试以不垂直居中的东西为中心。解决这个问题的唯一方式是将标签抬高一半的边距差，这应该是 .5rem 。因此，这将最有可能的工作：

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

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

---

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

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

在此之后，大多数其他答案都可以使用。

I am facing an interesting issue with Bootstrap3 where the label ("Name") seems to be aligned at the bottom of the <h2> tag (see the blue box in the image (highlighted by the Chrome dev tool).

(From the Bootstrap 3 documentation putting labels inside headings seem to be a suggested way)

I can't figure out how to vertically align the label in center of <h2>. vertical-align doesnt work on h2 it seems. This answer to another SO post suggests changing the line-height but that doesn't seem to be an intuitive approach since it increases the padding on both sides of h2 (basically increasing the size of the h2 block).

This label is inside a table cell whose code is as follows:

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

(vcenter is the class I am trying to use to vertically align)

解决方案

It looks like all solutions teach you how to vertically center your .label in the <td>. However, none of them takes into consideration the difference between top and bottom margins on the h2 element.

Basically, you're trying to vertically center with something that's not vertically centered. The only way to account for it is to raise the label with half the margins difference, which should be .5rem. So this will most likely to the job:

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

If it doesn't, you have stronger CSS rules applying and I'll need to take a look at them. Feel free to change -.5rem to whatever works for you (in rem or px).

---

Another approach is to use any vertical centering technique and make the top and bottom margins equal on td>h2 elements:

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

After this, most of the other answers will work.

这篇关于Bootstrap3 - 在h2内垂直对齐标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！