CSS Vertical align не работает с float

Как я могу использовать vertical-alignкак floatв divсвойствах? vertical-alignРаботает отлично , если я не использовать float. Но если я использую поплавок, то он не работает. Для меня важно использовать float:rightпоследний div.

Я пытаюсь следовать, если вы удалите float из всех 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 vertical-align указывает вертикальное выравнивание встроенного элемента, элемента встроенного блока или элемента таблицы-ячейки.

Прочтите эту статью, чтобы узнать о вертикальном выравнивании

Вертикальное выравнивание действительно не работает с плавающими элементами. Это потому, что float выводит элемент из обычного потока документа. Возможно, вы захотите использовать другие методы вертикального выравнивания, такие как те, которые основаны на преобразовании, отображении: таблица, абсолютное позиционирование, высота строки, js (возможно, в крайнем случае) или даже простую старую таблицу html (возможно, первый выбор, если контент собственно табличный). Вы обнаружите, что по этому поводу ведутся жаркие споры.

Однако вот как вы можете вертикально выровнять СВОИ 3 блока:

.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; 
}

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