CSS Vertical align不适用于float

Question

我如何使用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属性指定内嵌,内联块或表格单元元件的垂直取向.

阅读本文了解vertical-align

Answer 3

实际上,垂直对齐不适用于浮动元素.那是因为float从文档的正常流中提升元素.你可能想要使用其他垂直对齐技术,比如基于变换,显示:table,绝对定位,line-height,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; 
}

不确定为什么你需要固定宽度,显示:内联块和浮动.