L'allineamento verticale CSS non funziona con float

Come posso utilizzare il vertical-aligncosì come floatnelle divproprietà? Il vertical-alignbene funziona se io non uso il float. Ma se uso il galleggiante, allora non funziona. È importante per me utilizzare il float:rightper l'ultimo div.

Sto provando a seguire, se rimuovi il float da tutti i div, funzionerebbe bene:

<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

Devi impostare l'altezza della linea.

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

Modificato:

Il vertical-align proprietà CSS specifica l'allineamento verticale di una linea, inline-block o elemento table-cell.

Leggi questo articolo per comprendere l'allineamento verticale

L'allineamento verticale non funziona con gli elementi flottati, infatti. Questo perché float solleva l'elemento dal normale flusso del documento. Potresti voler utilizzare altre tecniche di allineamento verticale, come quelle basate su trasformazione, visualizzazione: tabella, posizionamento assoluto, altezza di riga, js (ultima risorsa forse) o anche la semplice vecchia tabella html (forse la prima scelta se il contenuto è effettivamente tabulare). Scoprirai che c'è un acceso dibattito su questo tema.

Tuttavia, ecco come allineare verticalmente i TUOI 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; 
}

Non sono sicuro del motivo per cui hai bisogno sia di larghezza fissa, display: inline-block che floating.