CSS垂直对齐不能使用float [英] CSS Vertical align does not work with float

问题描述

如何在 div中使用 vertical-align 以及 float 属性？如果我不使用 float ， vertical-align 但如果我使用float，那么它不工作。对我来说重要的是对最后一个div使用 float：right 。

How can I use the vertical-align as well as float in the div properties? The vertical-align works fine if I do not use the float. But if I use the float, then it does not work. It is important for me to use the float:right for the last div.

你从所有div中删除浮动，然后它会工作正常：

I am trying following, if you remove the float from all div's then it would work fine:

<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

推荐答案

您需要设置line-height。

You need to set line-height.

<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/

这篇关于CSS垂直对齐不能使用float的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！