Css 在标题内垂直对齐引导标记
当我在标题内使用引导标记时,如Css 在标题内垂直对齐引导标记,css,twitter-bootstrap,twitter-bootstrap-3,bootstrap-4,Css,Twitter Bootstrap,Twitter Bootstrap 3,Bootstrap 4,当我在标题内使用引导标记时,如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>&l
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>
结果
请参见此引导:
我怎样才能使它垂直于中心对齐?一直讨厌这个问题 虽然有点老套,但这是可行的:
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;
}
为演示目的定义了标题字体大小在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>
演示:我能够使用一行:
h3>.badge{vertical align:middle}
我不需要页边顶部(事实上,设置页边顶部会弄乱对齐)。我也不需要在h1、h2、h3上设置垂直对齐-只需要徽章-同意布伦特的意见。我也需要页边顶部。谢谢各位。
<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>
<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>