如何控制 H 标签上方/下方的空间?例如,我希望两个 H 元素在 Logo 旁边垂直居中,并且它们之间的间距最小。
我试过使用 margin
、padding
和 line-height
但似乎不太令人满意。例如:
CSS
img {
float: left;
}
h1 {
line-height: 0;
padding-top: 32px;
}
h2 {
margin-top: -20px;
}
HTML
<div id="logo">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/51/IBM_logo.svg/200px-IBM_logo.svg.png" />
<h1 id="a">Label A</h1>
<h2 id="b">Label B</h2>
</div>
有什么更好的方法吗?
最佳答案
vertical-align
和 float
不一致。
Vertical-align
可以在 td
(或类似显示)内使用,或者在 baseline
上使用,或者在内联框之间使用.
如果将显示为内联框的元素内的标题换行到另一个内联框旁边,那么,您可以将它们vertical-align
彼此:
.valgn {
vertical-align:middle;
display:inline-block;
}
#logo h1, #logo h2 {
margin:0;
}
对于这个标记:
<div id="logo">
<img class="valgn" src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/51/IBM_logo.svg/200px-IBM_logo.svg.png" />
<div class="valgn">
<h1 id="a">Label A</h1>
<h2 id="b">Label B</h2>
</div>
</div>
注意:为了验证结构,图像也可以包装到 div.valign 中。
关于html - 标题标签的垂直间距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24039510/