FAQ version Beta 0.5
Positionnement, alignement, centrage
Comment centrer verticalement un élément ?
Il y a actuellement 5 méthodes.
La mauvaise habitude est de vouloir utiliser la propriété "vertical-align".
Or vertical align n'est pas prévu pour aligner un élément quelconque dans un bloc, mais un élément en-ligne dans un autre élément en-ligne (par exemple une image à côté d'un texte)… ou dans un élément de type table-cell (voir exemple plus bas).
-> http://www.yoyodesign.org/doc/w3c/css2/visudet.html#propdef-vertical-align
Voici les 5 pistes actuelles.
Elles sont parfois approximatives pour la bonne et simple raison que le Web n'est pas un média paginé contrairement au média d'impression, et que le concepteur doit adapter ses besoins au média et non l'inverse.
1- Pour aligner tout élément (bloc de préférence) dans un bloc : http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Centrer-les-elements-ou-un-site-web-en-CSS
2- Pour aligner une ligne de texte (ou une balise inline) dans un bloc, utiliser de préférence une combinaison "height/line-height" :
http://marcarea.com/weblog/index.php/?2004/10/18/182-10-astuces-css-correction
Source : http://evolt.org/article/rdf/17/60369/
Note : attention aux bugs IE avec les images (entre-autre) : http://www.positioniseverything.net/explorer/lineheightbug.html
3- Pour aligner plusieurs lignes de texte sans passer par des padding verticaux : http://yidille.free.fr//plux/valign/?2-complement-vertical-align
4- Technique avec hacks et display: inline-block : http://www.brunildo.org/test/img_center.html
5- Exemple de centrage vertical avec table-cell / vertical-align (la plus logique, mais ne fonctionne pas sur IE<7) :
6- Dernière solution, si toutes les autres ne conviennent pas et si la compatibilité avec IE est nécessaire : utiliser une cellule de tableau sur laquelle vertical-align fonctionnera. Eh oui, nous ne sommes pas des intégristes non-plus !
La mauvaise habitude est de vouloir utiliser la propriété "vertical-align".
Or vertical align n'est pas prévu pour aligner un élément quelconque dans un bloc, mais un élément en-ligne dans un autre élément en-ligne (par exemple une image à côté d'un texte)… ou dans un élément de type table-cell (voir exemple plus bas).
-> http://www.yoyodesign.org/doc/w3c/css2/visudet.html#propdef-vertical-align
Voici les 5 pistes actuelles.
Elles sont parfois approximatives pour la bonne et simple raison que le Web n'est pas un média paginé contrairement au média d'impression, et que le concepteur doit adapter ses besoins au média et non l'inverse.
1- Pour aligner tout élément (bloc de préférence) dans un bloc : http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Centrer-les-elements-ou-un-site-web-en-CSS
2- Pour aligner une ligne de texte (ou une balise inline) dans un bloc, utiliser de préférence une combinaison "height/line-height" :
http://marcarea.com/weblog/index.php/?2004/10/18/182-10-astuces-css-correction
Source : http://evolt.org/article/rdf/17/60369/
Note : attention aux bugs IE avec les images (entre-autre) : http://www.positioniseverything.net/explorer/lineheightbug.html
3- Pour aligner plusieurs lignes de texte sans passer par des padding verticaux : http://yidille.free.fr//plux/valign/?2-complement-vertical-align
4- Technique avec hacks et display: inline-block : http://www.brunildo.org/test/img_center.html
5- Exemple de centrage vertical avec table-cell / vertical-align (la plus logique, mais ne fonctionne pas sur IE<7) :
div {
width: 300px;
height: 200px;
border: 1px solid black;
display: table-cell;
vertical-align: middle;
}
<div>
<p>bloc centré verticalement</p>
</div>
width: 300px;
height: 200px;
border: 1px solid black;
display: table-cell;
vertical-align: middle;
}
<div>
<p>bloc centré verticalement</p>
</div>
6- Dernière solution, si toutes les autres ne conviennent pas et si la compatibilité avec IE est nécessaire : utiliser une cellule de tableau sur laquelle vertical-align fonctionnera. Eh oui, nous ne sommes pas des intégristes non-plus !
Liens complémentaires