Texte centré horizontalement
| table centrée horizontalement dans mozilla / opéra, et 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 de la bordure */
width:200px ; /* largeur de la boite, en pixels */
text-align:justify} /* On met en double-justifié le texte de
la boite, qui est sinon centré par ".centrage". */
</style>
</head>
<body>
<!-- exemple5-->
<p class="centrage">Texte centré horizontalement</p>
<!-- exemple6-->
<div class="centrage">
<table class="centrage" width="30%" border="2">
<tr>
<td>table centrée horizontalement dans mozilla / opéra,
et Internet Explorer.</td>
</tr>
</table>
</div>
<!-- exemple7-->
<div class="centrage">
<div class="boite centrage">Boite centrée horizontalement
sous mozilla / opéra / IE</div>
</div>
</body>
</html>
COMMENTAIRES
Ces exemples passent dans tous les navigateurs modernes. Ils ne sont pas indispensables si on utilise une DTD stricte (voir centrage 2).
Il faut répéter le style de centrage deux fois : une première fois à l'intérieur de la table (ou de la boite, qui fonctionne de la même façon), une seconde fois en l'encadrant. C'est la seul façon de passer à la fois sous IE et sous les autres navigateurs. Toujours ces petits bugs énervant d'Internet Explorer !
Le stylage ".centrage" centrant également le texte dans les boites et les tableaux (à cause de text-align:center), il faut remettre text-align:left ou text-align:justify dans le style spécifique de la boite ou du tableau pour changer cela. Ici, on l'a fait dans la boite ".boite", mais pas dans le tableau. Il aurait fallu pour ce faire rajouter dans le <head> une ligne :
table {text-align:center}.
Marche plus ou moins dans Netscape 4.