CSS垂直alignment不适用于浮动

我怎样才能使用vertical-align以及float div属性？ vertical-align工作正常，如果我不使用float 。 但是，如果我使用浮动，那么它不起作用。 对我来说最重要的是使用float:right来表示最后一个div。

我想下面，如果你从所有div中删除浮动，那么它会正常工作：

 <div class="wrap"> <div class="left">First div, float left, has more text.</div> <div class="left2">Second div, float left </div> <div class="right">Third div, float right</div> </div> 

CSS：

 .wrap{ width: 500px; overflow:hidden; background: pink; } .left { width: 150px; margin-right: 10px; background: yellow; float:left; vertical-align: middle; display:inline-block } .left2 { width: 150px; margin-right: 10px; background: aqua; float:left; vertical-align: middle; display:inline-block } .right{ width: 150px; background: orange; float:right; vertical-align: middle; display:inline-block } 

的jsfiddle

Answer 1

你需要设置行高。

 <div style="border: 1px solid red;"> <span style="font-size: 38px; vertical-align:middle; float:left; line-height: 38px">Hejsan</span> <span style="font-size: 13px; vertical-align:middle; float:right; line-height: 38px">svejsan</span> <div style="clear: both;"></div> 

http://jsfiddle.net/VBR5J/

Answer 2

编辑：

vertical-align CSS属性指定内联，内联块或表格元素的垂直alignment。

阅读这篇文章了解垂直alignment

Answer 3

实际上，垂直alignment不适用于浮动元素。 这是因为浮动将元素从正常的文档stream中提起。 您可能想要使用其他垂直alignment技术，如基于变换，显示：表，绝对定位，行高，js（最后的手段也许），甚至普通的旧的HTML表（也许是第一个select，如果内容是实际上是表格）。 你会发现在这个问题上有一个激烈的辩论。

不过，这是你如何垂直alignment你的3个div：

 .wrap{ width: 500px; overflow:hidden; background: pink; } .left { width: 150px; margin-right: 10px; background: yellow; display:inline-block; vertical-align: middle; } .left2 { width: 150px; margin-right: 10px; background: aqua; display:inline-block; vertical-align: middle; } .right{ width: 150px; background: orange; display:inline-block; vertical-align: middle; } 

不知道为什么你需要固定的宽度，显示：内联块和浮动。