centrage horizontal et vertical en HTML/CSS
Voici quelques astuces qui vous permettront de centrer des éléments en CSS/HTML. Tout d'abord il faut bien faire la différence entre élément inline et élément block : Comprendre la structure HTML et le rendu CSS des balises : bloc et en-ligne [Alsacreations]
Centrage horizontal d'un élément inline dans un élément block :
utilisation de la propriété CSS text-align:center;
<div style="width:200px;border:solid 1px #000;text-align:center">
texte centré horizontalement
</div>
Centrage horizontal d'un élément block dans un élément block :
utilisation de la propriété CSS margin:auto;
<div style="width:200px;border:solid 1px #000;">
<div style="margin:auto;border:solid 1px #F0F;width:50px;">
block centré horizontalement
</div>
</div>
Centrage vertical d'un élément inline dans un élément block :
utilisation des propriétés CSS height et line-height
<div style="height:10em;border:solid 1px #0F0;line-height:10em;">
texte centré verticalement
</div>
A noter que la propriété vertical-align permet seulement de centrer 2 éléments inline ou table-cell entre eux, généralement une image avec du texte.
Centrage vertical d'un élément block dans un élément block :
Il n'existe malheureusement pas de solution fiable pour centrer horizontalement un élément block dans un élément block. Si vous conaissez la hauteur de l'élément à centrer, vous pouvez jouer avec la propriété margin pour le centrer.
<div style="height:200px;border:solid 1px #000;">
<div style="border:solid 1px #F0F;height:50px;margin:75px 0;">
block centré verticalement
</div>
</div>
Mais si vous ne connaissez pas les hauteurs, la solution consiste à passer par un tableau ...
<table style="border:solid 1px #0F0;">
<tr>
<td valign="middle" style="height:200px;">
<div style="height:5em;border:solid 1px #000;">
block centré verticalement
</div>
</td>
</tr>
</table>
On peut quand même forcer le type de la balise en table-cell mais IE (6 et 7) ne comprennent pas cette propriété :
<div style="height:200px;border:solid 1px #000;display:table-cell;vertical-align:middle;">
<div style="border:solid 1px #F0F;height:50px;">
block centré verticalement
</div>
</div>