Se connecter
Inscription
Mot de passe perdu
zion - Comment centrer horizontalement un tableau ?1. Avec margin: auto;
- table {
- margin-left: auto;
- margin-right: auto;
- }
Compatibilité : IE-Win 6, Opera 6, Mozilla (sans-doute IE-Mac 5, à vérifier)
2. Avec text-align: center;
Il faut placer le tableau dans un <div> qui a les propriétés suivantes :
- div {
- text-align: center;
- }
Compatibilité : Netscape 4, IE-Win 5/6
Attention ! text-align: center; n'est pas une méthode conforme aux normes pour centrer un tableau. text-align ne doit normalement centrer que le texte. En conséquence le texte qui se trouve dans le <div> sera centré
3. Avec text-align: center et inline-table
On peut faire en sorte que le tableau se comporte comme du texte avec la propriété display: inline-table. Dans ce cas, text-align: center; a un sens sur le centrage d'un tableau.
- div {
- text-align: center;
- }
- table {
- display: inline-table;
- }
Compatibilité : Opera 6
(le tableau est centré avec Netscape 4 et IE-Win 5-6 mais c'est à cause du 2.)
4. Avec le positionnement absolu
Admettons qu'on veuille centrer un tableau de 500 pixels de large :
- table {
- position: absolute;
- left: 50%;
- margin-left: -250px;
- }
Compatibilité: : IE-Win 5/6, Opera 6, Mozilla (sans-doute IE-Mac 5, à vérifier)
Note : cette méthode fonctionne aussi pour positionner un bloc verticalement. Voir http://www.wpdfd.com/editorial/wpd0103.htm#toptip
Merci à gm_superstar pour cet article
Poster un commentaire
Consoles
Jeux Vidéos
Apple
Android
Microsoft
