166
Maîtrise des CSS
Dans.cet.exemple,.j’ai.décidé.de.fixer.la.largeur.de.la.div.conteneur.en.pixels,.afin.qu’elle.
tienne.parfaitement.dans.un.écran.de.1 024 × 768 pixels..Vous.pouvez.cependant.tout.aussi.
aisément.définir.la.largeur.sous.la.forme.d’un.pourcentage.de.l’élément.body.ou.par.rapport.
à.la.taille.du.texte.en.utilisant.des.cadratins.(em).
Cette.technique.fonctionne.sur.tous.les.navigateurs.modernes..Internet.Explorer 5.x.et.Internet.Explorer 6.en.mode.Quirks.n’interprètent.pas.la.déclaration.margin:auto..Par.chance,.
Internet.Explorer.interprète.text-align: center.étrangement,.en.centrant.tous.les.éléments. et. pas. seulement. le. texte..Vous. pouvez. donc. exploiter. cette. bizarrerie. en. centrant.
tout.dans.la.balise.body,.et.notamment.la.div.conteneur,.puis.en.réalignant.le.contenu.du.
conteneur.à.gauche :
body {
text-align: center;
}
.wrapper {
width: 920px;
margin: 0 auto;
text-align: left;
}
Cette.manière.d’utiliser.la.propriété.text-align.est.un.hack (un.bidouillage.en.CSS),.mais.
elle.est.relativement.inoffensive.car.elle.n’a.pas.d’impact.négatif.sur.le.site..Le.conteneur.
apparaît.maintenant.centré.dans.les.versions.plus.anciennes.d’Internet.Explorer.comme.dans.
les.navigateurs.modernes.compatibles.avec.les.standards.(voir.Figure 8.5).
Figure 8.5
Centrage d’une
mise en page
avec margin:auto.