Comment centrer un bloc avec du CSS
Date de publication : 09/04/2008
Par
Russ Weakley (Max Design)
Nicolas Vallée (traducteur) (Home Page)
Cet article est la traduction de CSS Centering - fun for all! qui
a pour but de vous donner des méthodes pour centrer vos blocs à l'aide
du CSS.
I. Introduction
II. Centrage de boîtes élastiques
III. Centrage de boîtes à largeur fixe
III-1. Centrage du corps de la page
III-2. Réinitialisation de text-align
III-3. Visualisation
IV. Remerciements
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.
| CSS du conteneur pour un centrage fixe |
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 :
| CSS du conteneur pour un centrage automatique |
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-1. 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émént body (le corps de la page), le
conteneur sera centré correctement. Ainsi, avec une règle
supplémentaire :
| CSS du conteneur pour un centrage avec le body |
body
{
text-align: center;
}
div#container
{
margin-left: auto;
margin-right: auto;
width: 50em;
}
|
III-2. 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 :
| CSS du conteneur pour un centrage correct avec le body |
body
{
text-align: center;
}
div#container
{
margin-left: auto;
margin-right: auto;
width: 50em;
text-align: left;
}
|
III-3. 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.
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.
| (1) |
Cet article a été publié à l'origine en version anglaise et est visible à
l'adresse suivante :
CSS Centering - fun for all!
|
Copyright © 2008 Russ Weakley. Aucune reproduction, même partielle, ne peut être faite
de ce site et de l'ensemble de son contenu : textes, documents, images, etc
sans l'autorisation expresse de l'auteur.
Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E
de dommages et intérêts.
Cette page est déposée à la
SACD.
