Bootstrap3-在h2中垂直对齐标签
阿努帕姆
我在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是我尝试用于垂直对齐的类）
tao
看来所有解决方案都在教您如何垂直.label放置居中位置<td>。然而，他们没有考虑到的区别顶部和底部 边缘上的h2元素。
基本上，您尝试使用未垂直居中的内容进行垂直居中。解决此问题的唯一方法是将标签的边距差异提高一半，应该为.5rem。因此，这最有可能完成这项工作：
h2 > .label {
position: relative;
top: -.5rem;
}
如果没有，那么您CSS将应用更严格的规则，我需要研究一下它们。随时更改-.5rem对您有用的任何内容（inrem或px）。
另一种方法是使用任何垂直居中技术，并使td>h2元素的顶部和底部边距相等：
td>h2 { margin-top: 1rem; margin-bottom: 1rem; }
在此之后，大多数其他答案将起作用。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
在Bootstrap3响应网格中垂直对齐两个列div
- 2
bootstrap3中的浮动框
- 3
bootstrap3中的浮动框
- 4
Bootstrap3 TagsInput中缺少StyleSheet
- 5
如何覆盖 Bootstrap3 中的样式？
- 6
在Bootstrap中垂直对齐？
- 7
Bootstrap-将Bootstrap中的标签和H2对齐
- 8
Bootstrap3 3列布局到2列
- 9
如何在H2标签中垂直对齐div？
- 10
在Bootstrap3行中将内容垂直居中？
- 11
如何在Bootstrap3上使<i>标签成为HREF？
- 12
垂直对齐h2底部
- 13
一页在 bootstrap3 中分为 2 列
- 14
Bootstrap3 - 在小型设备上将按钮分成 2 行
- 15
如何将Bootstrap3整合到phonegap中？
- 16
如何在bootstrap3中创建响应式按钮？
- 17
crash（'show'）在Bootstrap3中中断切换
- 18
bootstrap3模态中的回调函数
- 19
在Bootstrap3中更改导航栏的高度
- 20
在bootstrap3中切换侧边栏？
- 21
尝试在Bootstrap3中重新创建页面
- 22
Bootstrap3缀中的data-offset-bottom
- 23
bootstrap3模态中的回调函数
- 24
在bootstrap3中切换侧边栏？
- 25
更改Bootstrap3中的导航栏位置
- 26
在Bootstrap3中的输入字段上设置maxwidth
- 27
如何在bootstrap3中进行此布局？
- 28
汉堡菜单在Bootstrap3中不显示
- 29
在Bootstrap中垂直对齐左右元素
我来说两句