web-dev-qa-db-fra.com

L'alignement vertical CSS ne fonctionne pas avec float

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

J'essaie de suivre, si vous supprimez le flottant de toutes les divs, alors cela fonctionnerait bien:

<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

htmlcssvertical-alignment
73
user1355300

Vous devez définir 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/

84
Anders B

Édité:

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

Lisez cet article pour Comprendre vertical-align

16
Ahsan Khurshid

L'alignement vertical ne fonctionne pas avec les éléments flottants, en effet. En effet, float soulève l'élément du flux normal du document. Vous voudrez peut-être utiliser d’autres techniques d’alignement vertical, telles que celles basées sur transform, display: table, positionnement absolu, hauteur de ligne, js (dernier recours peut-être) ou même le vieux tableau HTML brut (peut-être le premier choix si le contenu est effectivement tabulaire). Vous constaterez qu'il y a un débat animé sur cette question.

Cependant, voici comment 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; 
}

Vous ne savez pas pourquoi vous avez besoin d'une largeur fixe et d'un affichage: inline-block et float.

8
Gabriel