| tableau centré horizontalement dans mozilla / opéra, mais pas dans Internet Explorer. |
| tableau pas centré horizontalement dans mozilla / opéra, mais centrée dans Internet Explorer. |
<html>
<head>
<style type="text/css">
.centrage { /* style de centrage horizontal pour tous les navigateurs
récents */
text-align :center ; /* centre texte (+ boite ou table sous IE seul)
*/
margin:auto} /* centre boite ou table, sauf sous IE */
.boite { /* boite quelconque pour exemple de centrage */
border: 5px outset ; /* style d'encadrement de la boite */
width:200px} /* largeur en pixels de la boite */
</style>
</head>
<body>
<!-- exemple1-->
<table class="centrage" width="30%" border="2">
<!--"centrage" appliqué dans le tableau ne marche
pas dans IE -->
<tr>
<td>table centrée horizontalement dans mozilla / opéra,
<b>mais pas dans
Internet Explorer</b>.</td>
</tr>
</table>
<!-- exemple2-->
<div class="centrage"> <!--"centrage" appliqué
autour du tableau ne marche QUE dans IE -->
<table width="30%" border="2">
<tr>
<td>table pas centrée horizontalement dans mozilla / opéra,
mais
centré dans Internet Explorer.</td>
</tr>
</table>
</div>
<!-- exemple3-->
<div class="centrage boite">Boite centrée sous mozilla
/ opéra, mais pas IE</div> <!--"centrage"
appliqué dans la boite ne marche pas dans IE -->
<!-- exemple4-->
<div class="centrage">
<div class="boite">Boite centrée sous IE, mais pas
mozilla / opéra</div> <!--"centrage" appliqué
autour de la boite ne marche QUE dans IE -->
</div>
</body>
</html>
COMMENTAIRES
Ces exemples de centrage horizontal visent à faire ressortir deux choses :
- Définition du style de centrage
Internet Explorer gère de façon bizarre le centrage horizontal. La fonction margin:auto devrait marcher partout, mais pas dans IE. D'ou l'utilisation de text-align:center. On combine donc les 2 dans le style "centrage".
A noter cependant qu'avec une DTD (x)html stricte, tous les exemples ci-dessus marchent parfaitement dans IE6. Le comportement de IE6 avec une telle DTD est donc plus conforme aux spécifications officielles.
- Ce qu'il ne faut pas faire
Quand on test ces styles sous un seul navigateur, on peut avoir le sentiment que cela marche, alors que ce ne sera qu'un cas particulier. Là aussi, Internet Explorer fait des siennes.
Les 4 exemples cités sont tous insatisfaisants (sauf DTD stricte). Les bonnes réponses pour toutes les DTD et tous les navigateurs sont dans "centrage 3".