Вертикальне вирівнювання CSS не працює з поплавком

Як я можу використовувати 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

Вам потрібно встановити висоту рядка.

<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 піднімає елемент із нормального потоку документа. Можливо, ви захочете використати інші методи вертикального вирівнювання, такі як ті, що базуються на перетворенні, відображенні: таблиця, абсолютне позиціонування, висота рядка, 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; 
}

Не впевнений, навіщо вам потрібна фіксована ширина, дисплей: вбудований блок та плаваючий.