Bootstrap3 - 在h2内垂直对齐标签 [英] Bootstrap3 - vertically align label within h2
问题描述
我在Bootstrap3中遇到了一个有趣的问题,其中标签(Name)似乎与< h2>
标签的底部对齐(请参阅蓝色(由Chrome开发工具突出显示)。
(From Bootstrap 3 将标签放入标题内似乎是一种建议的方式)
我无法弄清楚如何垂直对齐 这个标签位于表格单元格内,其代码如下: (vcenter是我试图用来垂直对齐的类) 它看起来像所有的解决方案教你如何垂直居中 基本上,您正尝试以不垂直居中的东西为中心。解决这个问题的唯一方式是将标签抬高一半的边距差,这应该是 如果没有, 应用规则,我需要看看他们。随意将 另一种方法是使用任何垂直居中技术并制作顶部和底部边距等于 在此之后,大多数其他答案都可以使用。 I am facing an interesting issue with Bootstrap3 where the label ("Name") seems to be aligned at the bottom of the (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 This label is inside a table cell whose code is as follows: (vcenter is the class I am trying to use to vertically align) It looks like all solutions teach you how to vertically center your 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 If it doesn't, you have stronger Another approach is to use any vertical centering technique and make the top and bottom margins equal on After this, most of the other answers will work. 这篇关于Bootstrap3 - 在h2内垂直对齐标签的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!< h2>
中间的标签,vertical-align看起来并不适用于h2。这对另一个SO帖子的答案建议改变行高,但这似乎不是一种直观的方法,因为它增加了填充双方的h2(基本上增加h2区块的大小)。
< td class = text-right>< h2>< span class =label label-default vcenter>名称< / span>< / h2>< / td>
.label
在< TD>
。但是,它们都没有考虑 top 和 底部 边距之间的差异在 h2
元素上。
.5rem
。因此,这将最有可能的工作:
h2> .label {
position:relative;
top:-.5rem;
}
- 。5rem
更改为适合您的任何内容(在 rem
或 px
)。
td> h2
元素:
td> h2 {margin- top:1rem; margin-bottom:1rem; }
<h2>
tag (see the blue box in the image (highlighted by the Chrome dev tool).
<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).<td class="text-right"><h2><span class="label label-default vcenter">Name</span></h2></td>
.label
in the <td>
. However, none of them takes into consideration the difference between top and bottom margins on the h2
element. .5rem
. So this will most likely to the job:h2 > .label {
position: relative;
top: -.5rem;
}
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
).
td>h2
elements:td>h2 { margin-top: 1rem; margin-bottom: 1rem; }