CSS Vertical align ne fonctionne pas avec float

Question

Comment puis-je utiliser le vertical-align ainsi que float dans le div propriétés ? Le site vertical-align fonctionne bien si je n'utilise pas le float . Mais si j'utilise le flotteur, cela ne fonctionne pas. Il est important pour moi d'utiliser le float:right pour la dernière division.

J'essaie de suivre, si vous supprimez le flotteur de tous les div's, cela devrait fonctionner correctement :

<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

Vous devez définir la hauteur de la ligne.

<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

Édité :

Le site alignement vertical La propriété CSS spécifie l'alignement vertical d'un élément inline, inline-block ou table-cell.

Lisez cet article pour Comprendre l'alignement vertical

Answer 3

L'alignement vertical ne fonctionne pas avec les éléments flottants, en effet. C'est parce que le flottement soulève l'élément du flux normal du document. Vous pouvez utiliser d'autres techniques d'alignement vertical, comme celles basées sur transform, display : table, le positionnement absolu, line-height, js (en dernier recours peut-être) ou même le bon vieux tableau html (peut-être le premier choix si le contenu est réellement tabulaire). Vous constaterez qu'il y a un débat animé sur cette question.

Cependant, voici comment vous pouvez aligner verticalement VOS 3 divs :

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

Je ne sais pas pourquoi vous avez besoin à la fois d'une largeur fixe, d'un affichage : inline-block et d'un affichage flottant.