0

这是我正在谈论的示例，您需要放大才能看到问题 http://jsfiddle.net/54NEa/

<div id="top">SomeText</div>
<div id="middle">SomeText</div>
<div id="bottom">SomeText</div>

div{
    display: inline-block;
    background-color: red;
    font-family: Lucida Sans Unicode,Verdana,Arial,Helvetica,sans-serif;
    font-size: 10px;
    line-height: 10px;
}
div.top {vertical-align:top;}
div.middle {vertical-align:middle;}
div.bottom {vertical-align:bottom}

该行是 10px，但文本没有完全填充它，它有额外的填充 - 在 FF 中，填充在下方，在 Chrome 中，它在上方，无论垂直对齐属性如何。这会随着字体的不同而有所不同，但它从来没有真正完全填满它的行高，它会“摆动”。无论浏览器如何，任何想法如何将该字体固定在相对于其行的一个位置？我制作了一个小的 css 按钮，我需要确保我的行的高度正好是 10px，文本的高度也正好是 10px，所以它看起来总是一样的。

4

3 回答 3

1

您必须调整行高以适合元素。

HTML：

    <div id="top"><span>SomeText</span></div>

div{
    height:30px;
    display: inline-block;
    background-color: red;
    font: 10px Lucida Sans Unicode,Verdana,Arial,Helvetica,sans-serif;
}

span{
    line-height:30px;
}

这是一个小提琴：http: //jsfiddle.net/54NEa/1/

于 2013-01-18T19:32:08.560 回答
0

vertical-align仅适用于内联元素。尝试使用 aspan而不是 a div，或display:inline在您的 div 上设置。

编辑

您还需要设置容器的font-size和line-height。在这种情况下，我使用了身体。我还将显示更改为inline，因为您似乎不需要inline-block，并使用无单位line-height

http://jsfiddle.net/78fxj/

于 2013-01-18T19:32:19.497 回答
0

您还可以将 div 的显示设置为 table-cell。这是一个很好的解决方案，但有时它还有其他含义。

<div id="top">SomeText</div>
<div id="middle">SomeText</div>
<div id="bottom">SomeText</div>

div{
    display: **table-cell**;
    background-color: red;
    font: 10px/10px Lucida Sans Unicode,Verdana,Arial,Helvetica,sans-serif;
}
div.top {vertical-align:top;}
div.middle {vertical-align:middle;}
div.bottom {vertical-align:bottom}
于 2013-01-18T19:35:23.200 回答