vertical-align：为什么它对我不起作用？

Question

这是html：

<div style="height: 100px">
    <span style="vertical-align:top;">top</span>
    <span style="vertical-align:bottom;">bottom</span>
</div>

http://jsfiddle.net/CaS5r/1/

为什么vertical-align属性在此示例中不起作用？我是否错误地使用它？

Answer 1

我不确定你想要达到什么目的。

看到这个小提琴：http://jsfiddle.net/CaS5r/4/

它确实有效，但它只与它的兄弟姐妹对齐。

一些调试

span {
    outline: 1px solid red;
}
div {
    background: yellow;
    height: 100px;
} 

HTML

<div >
    <span style="vertical-align:top;">top</span>
    <span style="vertical-align:middle;">middle</span>
    <span style="vertical-align:baseline;">baseline</span>
    <span style="vertical-align:bottom;">bottom</span>
</div>

更新

如果字体较大（例如50px）http://jsfiddle.net/CaS5r/5/

，您可以更好地看到它

更新

您可能想要使用display: table;

http://jsfiddle.net/CaS5r/7/

然后它会做你期望的事情