当我在标题中使用Bootstrap badge
时,例如h1
,h2
,h3
,垂直对齐是关闭的。badge
与标题文本的底部对齐。我希望徽章与标题文本垂直居中对齐。
HTML
<h1><span class="badge">badge</span> Heading 1</h1>
<hr>
<h2><span class="badge">badge</span> Heading 2</h2>
<hr>
<h3><span class="badge">badge</span> Heading 3</h3>
CSS
h1,h2,h3 {
vertical-align:middle;
}
h1>.badge, h2>.badge, h3>.badge {
vertical-align:middle;
}
Result..
查看这个引导程序:http://bootply.com/88526
我怎么才能让这个垂直对齐?
发布于 2013-10-18 22:38:41
一直讨厌这个问题。
有点老生常谈,但这是有效的:
h1 { font-size: 2em; }
h2 { font-size: 1.6em; }
h3 { font-size: 1.4em; }
h1,h2,h3 {
vertical-align:middle;
}
h1>.badge, h2>.badge, h3>.badge {
vertical-align:middle;
margin-top: -0.5em;
}
定义了用于演示目的的标题字体大小
发布于 2018-04-23 23:04:31
在Bootstrap 4中,垂直对齐问题不再是问题,因为徽章将继承包含标题的大小。
<div class="container">
<h1><span class="badge badge-pill badge-dark">badge</span> Heading 1</h1>
<hr>
<h2><span class="badge badge-pill badge-dark">badge</span> Heading 2</h2>
<hr>
<h3><span class="badge badge-pill badge-dark">badge</span> Heading 3</h3>
</div>
但是,align-middle
类用于在标题外垂直对齐徽章。
<div class="container">
<span class="badge badge-pill badge-dark align-middle">badge</span> <span class="h1 align-middle">Heading 1</span>
<hr>
<span class="badge badge-pill badge-dark align-middle">badge</span> <span class="h2 align-middle">Heading 2</span>
<hr>
<span class="badge badge-pill badge-dark align-middle">badge</span> <span class="h3 align-middle">Heading 3</span>
</div>
https://stackoverflow.com/questions/19452111
复制相似问题