Comment centrer un bloc avec du CSS

Russ Weakley

Traducteur

Nicolas Vallée

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.

- Titre : Comment centrer un bloc avec du CSS

- Auteur : Russ Weakley

- Traducteur : Nicolas Vallée

- Parution : 9 avril 2008

- Mise à jour : 31 décembre 2012

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. 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'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Introduction

- II. Centrage de boîtes élastiques

- III. Centrage de boîtes à largeur fixe

- III-A. Centrage du corps de la page

- III-B. Réinitialisation de text-align

- III-C. 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-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 :

CSS du conteneur pour un centrage avec le body

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 :

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-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

Exemple avec "text-align: center" et "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!