Comment centrer un bloc avec du CSS

Image non disponible

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.

Article lu   fois.

Les deux auteur et traducteur

Site personnel

Traducteur : Site personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

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
Sélectionnez
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
Sélectionnez
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
Sélectionnez
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
Sélectionnez
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!

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

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.