Éducation, société et technologie
Mise en page

CSS - Centrer une page dans la fenêtre

Comment centrer une boîte dans la fenêtre du navigateur
lundi 23 janvier 2006 par André Vincent

Techniques pour centrer le contenu d’une page dans une fenêtre à l’aide des feuilles de styles.

Mise à jour de cet article effectuée le lundi 23 janvier 2006 : simplification du centrage horizontal ET vertical.

Le code (X)HTML étant le suivant :

 Centrer horizontalement

Pour centrer horizontalement le contenu d’une page dans la fenêtre du navigateur en CSS, il suffit d’assigner une largeur fixe ou relative à #page, et de lui donner des marges auto :

La boîte <div id="page"> sera centrée proprement dans <body>.

Maheureusement, Internet Explorer pour Windows ne comprend pas cette directive logique et il faut tricher.

Pour que ça fonctionne sous toutes les versions de navigateurs, il faut aussi assigner à body la propriété text-align : center.

Donc :

Mais comme cette propriété est héritée, tous les éléments à l’intérieur de body seront aussi centrés. Il faut donc rétablir l’alignement à gauche du texte pour <div id="page"> et tous les éléments qu’il contient. Ce qui nous donne :

Une autre technique, moins intuitive, mais qui fonctionne aussi fort bien, consiste à placer de façon absolue le côté gauche de la boîte au centre de la fenêtre, puis ensuite de décaler la boîte vers la gauche de la moitié de sa largeur [width + (2 x border) + (2 x padding)].

Cette méthode est un peu plus restricitve car

  1. elle exige que la largeur de la boîte soit fixée avec des valeurs absolues (px, mm, etc...)
  2. à cause du modèle de boîte particulier de Internet Explorer 5.x sous Windows, il faut ajouter une division (#contenu dans notre exemple) à l’intérieur de #page pour prendre en compte l’épaisseur de la bordure (border) et l’espace entre le texte et la bordure (padding).

Ce qui donne ceci pour le code HTML :

Et ceci pour le code CSS :

Voilà pour le centrage horizontal.

 Centrer horizontalement ET verticalement

Pour centrer horizontalement et verticalement une boîte de dimension fixe dans une fenêtre, nous allons pousser un peu plus loin la méthode que nous venons d’explorer.

Nous utiliserons le même code HTML que dans l’exemple précédent :

Et ceci pour le code CSS :

Cette dernière méthode est particulièrement simple pour un contenu de dimension fixe comme une image, une vidéo ou une animation de type Flash.

Par contre, si nous désirons que la dimension de la boîte soit fluide ou élastique et puisse se redimensionner en fonction d’un contenu textuel et puisse produire un effet de zoom avec l’augementation du corps du texte, tout en restant centré horizontalement et verticalement, il faudra indiquer des valeurs relatives, comme ceci :

Voir aussi une autre méthode un peu plus tordue :

Remarque s’appliquant aux diverses méthodes précédentes : Le positionnement absolu en % pour top ne fonctionne pas avec Internet Explorer Mac. Heureusement, ce navigateur est en voie de disparition. Il existe bien une bidouille (hack) pour régler ça, mais ça déborderait largement les propos de cet article.

(Inspiré librement de :


Accueil | Contact | Plan du site | | Statistiques du site | Visiteurs : 130283 / 1820693

Suivre la vie du site fr  Suivre la vie du site Cours Web  Suivre la vie du site Sites web statiques  Suivre la vie du site CSS - Feuilles de styles   ?    |    titre sites syndiques OPML   ?

Site réalisé avec SPIP 3.1.4 + AHUNTSIC

Creative Commons License

Visiteurs connectés : 4