CSS垂直对齐不浮动工作(CSS Vertical align does not work with

我如何使用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:

编辑：

该垂直对齐 CSS属性指定内嵌，内联块或表格单元元件的垂直取向。

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

Answer 3:

垂直对齐不浮动元素的工作，确实如此。 这是因为浮动升降机从文档的正常流动的元素。 你可能想使用其他垂直取向技术，如基于变换，显示的：表，绝对定位，行高，JS（也许不得已），或者甚至是普通的老HTML表格（也许是第一选择，如果含量实际上表格）。 你会发现，有关于这一问题的激烈争论。

但是，这是你怎么能垂直对齐您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; 
}

不知道为什么你需要两个固定的宽度，显示：inline-block的和浮动。

文章来源: CSS Vertical align does not work with float