当我在标题内使用Bootstrap徽章,如h1,h2,h3,垂直对齐关闭.徽章朝向标题文本的底部.我希望徽章与标题文本垂直对齐.
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,h3 {
vertical-align:middle;
}
h1>.badge,h2>.badge,h3>.badge {
vertical-align:middle;
}
结果..
看到这个Bootply：http://bootply.com/88526
如何让它垂直对准中心？
解决方法
总是讨厌这个问题.
有点黑客,但这样做：
h1 { font-size: 2em; }
h2 { font-size: 1.6em; }
h3 { font-size: 1.4em; }
h1,h3 {
vertical-align:middle;
}
h1>.badge,h3>.badge {
vertical-align:middle;
margin-top: -0.5em;
}
为演示目的定义标题字体大小
