为什么在 CSS 中使用浮动时垂直对齐不能正常工作？

Question

如何在 div 属性中使用 vertical-align 以及 float ？ 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

原文由 user1355300 发布，翻译遵循 CC BY-SA 4.0 许可协议

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/

原文由 Anders B 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

编辑：

vertical-align CSS 属性指定内联、内联块或表格单元格元素的垂直对齐方式。

阅读这篇文章 了解垂直对齐

原文由 Ahsan Khurshid 发布，翻译遵循 CC BY-SA 3.0 许可协议