I. Introduction▲
Comment centreriez-vous le contenu d'un bloc dans une page en utilisant du CSS ? Il y a deux grandes manières de procéder, et le choix se fait en fonction du type des blocs contenus dans votre page :
- élastique, c'est-à-dire qu'il va se modifier suivant la taille du navigateur ;
- fixe, autrement dit à largeur fixe.
II. Centrage de boîtes élastiques▲
Les boîtes élastiques sont faciles à centrer en utilisant des marges de chaque côté de la boîte les contenant. Les marges peuvent être définies avec des unités em, pixel ou pourcentage.
div#container
{
margin-left: 10%;
margin-right: 10%;
}III. Centrage de boîtes à largeur fixe▲
En théorie, vous devriez pouvoir appliquer des marges automatiques sur les côtés droit et gauche de la boîte les contenant, et cela devrait centrer la page.
Le modèle visuel formaté par le W3C déclare que "Si les marges gauche (margin-left) et droite (margin-right) sont simultanément définies à la valeur auto, les valeurs utilisées sont égales. Cela centre horizontalement l'élément en respectant les bords de la boîte le contenant."
Ainsi, un conteneur devrait pouvoir être centré en utilisant les règles suivantes :
div#container
{
margin-left: auto;
margin-right: auto;
width: 50em;
}Cependant, quelques navigateurs ne centrent pas les conteneurs utilisant cette méthode, et ignorent les marges automatiques. Voici certains de ces navigateurs :
- Netscape Navigator 4 (Mac and Windows) ;
- Internet Explorer 4, 5 et 5.5 pour Windows ;
- Internet Explorer 6 (lorsqu'on le met en mode Quirks).
En ajoutant deux règles simples, ce problème peut survenir sur tous les navigateurs cités ci-dessus, à l'exception de Netscape Navigator 4.
III-A. Centrage du corps de la page▲
Tant que ces navigateurs ignorent les marges automatiques, ils suivront la règle text-align: center. Si ceci est appliqué à l'élément body (le corps de la page), le conteneur sera centré correctement. Ainsi, avec une règle supplémentaire :
body
{
text-align: center;
}
div#container
{
margin-left: auto;
margin-right: auto;
width: 50em;
}III-B. Réinitialisation de text-align▲
Le seul problème avec cette nouvelle règle est le fait que tout le contenu de la page sera désormais centré. Pour surmonter ce défaut d'alignement, une nouvelle règle est ajoutée dans le bloc conteneur : text-align: left. Le code CSS final sera donc :
body
{
text-align: center;
}
div#container
{
margin-left: auto;
margin-right: auto;
width: 50em;
text-align: left;
}III-C. Visualisation▲
Le premier exemple montre un conteneur qui a été centré dans la page grâce aux marges automatiques, mais qui n'a pas été centré sur son élément body.
Exemple sans "text-align: center"
Le second exemple montre un conteneur qui a été centré dans la page au moyen des marges automatiques, mais aussi sur son élément body, et qui possède la propriété text-align: left
IV. Remerciements▲
Tous mes remerciements à troumad pour sa relecture.
Cet article a été publié à l'origine en version anglaise et est visible à l'adresse suivante : CSS Centering - fun for all!