css - 垂直对齐 : why it does not work for me?

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

我不确定你想要实现什么。

请参阅此 fiddle :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/

然后它做了你期望的事情