Question

如何控制H标签上方/下方的空间？例如，我希望两个H元素在徽标旁边垂直居中，它们之间的间距最小。

我尝试使用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>

http://jsfiddle.net/49cAv/19/

有更好的方法吗？

Answer 1

vertical-align和float不同意。

Vertical-align可以在td（或类似显示）中使用，也可以在baseline内使用，或在内联框之间使用。

如果你换行，一个元素里面的标题显示为一个内联框，而另一个内联框，那么，你可以vertical-align彼此对齐：

<强> DEMO

.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。

标题标签的垂直间距

1 个答案: