CSS

Centrer les éléments ou un site web en CSS

Il existe plusieurs méthodes d'alignement et de centrage en CSS, qui dépendent de la structure des balises (bloc, en-ligne) et le type (vertical, horizontal).

Article par (Eleveur de kiwiz, Strasbourg)
Mis à jour le . 510907 lectures.
Tags : css, positionnement, centrage, horizontal, vertical, vertical-align

Le centrage horizontal des éléments de type en-ligne

Vous voulez centrer horizontalement un élément de type "en-ligne" au sein d'un bloc.

La propriété CSS "text-align" est prévue pour s'appliquer sur un élément bloc (conteneur) et contrôlera l'alignement (gauche, droite, centré, justifié) de tous les élements de type "en-ligne" contenus dans ce bloc conteneur. C'est exactement ce qu'il nous faut !

Il vous suffit donc par exemple de procéder ainsi pour centrer une image au sein d'un bloc <div> :

<div class="centrage"><img src="…" alt="…" /></div>

.centrage {text-align: center;}

Le centrage horizontal des éléments de type bloc

Pour centrer horizontalement un élément (bloc, balise ou un site web entier) en CSS, il suffit de donner une largeur (width) à l'élément et les valeurs "auto" aux marges latérales.

Donnons à notre bloc l'id "global" :

#global {
  margin-left: auto;
  margin-right: auto;
  width: ...; /* largeur obligatoire pour être centré */
}

Note : /* ces textes sont des commentaires explicatifs, ils peuvent être supprimés */

Note 2 : Les marges du code fournies ci-dessus peuvent s'écrire de façon raccourcie : #global {margin: 0 auto;}

De cette manière, il équilibrera automatiquement les marges latérales.

Vous placerez votre bloc (div) conteneur dans votre code HTML :

<div id="global"></div>

Il suffit ensuite de placer le reste du contenu dans #global et votre site sera centré proprement.

Très simple, me direz-vous ! Petit hic : Les versions d'Internet Explorer inférieures à IE6 ne comprennent pas cette syntaxe logique et pour ces versions, il faut "tricher".

Pour que ça fonctionne sous IE5, il faut aligner le texte de façon centrée dans le body (car IE interprête mal cette propriété et s'en sert pour tout aligner : texte, mais aussi images et tous les éléments en général).

Donc :

body {
  margin: 0; /* pour éviter les marges */
  text-align: center; /* pour corriger le bug de centrage IE */
}

Il faudra ensuite rétablir l'alignement texte dans #global, ce qui donne :

#global {
  margin-left: auto;
  margin-right: auto;
  width: ...;
  text-align: left; /* on rétablit l'alignement normal du texte */
}

Attention à ne pas oublier de définir une largeur pour l'élément à centrer, sinon il ne pourra logiquement pas être centré (il occupera toute la largeur disponible, comme tous les blocs par défaut). Attention également : cette méthode de marges automatiques ne va pas centrer un bloc s'il est positionné en absolu (voir la partie ci-dessous).

N'oubliez pas le Doctype !

Attention à ne pas oublier le doctype du document (lire "DTD : comment choisir"), sinon votre page sera en mode Quirks.

Dans ce mode, Internet Explorer se comporte comme les versions antérieures à IE6, c'est à dire qu'il n'interprète pas les dimensions et les marges comme il le faudrait. Dans ce cas précis, il n'appliquerait pas le centrage à l'aide des marges automatiques.

Cas des éléments positionnés.

Pour les sites dont les éléments internes sont positionnés en "position: absolute" ou "position: relative", la technique des marges latérales automatiques ne fonctionne pas par défaut.

En effet, si votre conteneur est placé dans le flux (avec des marges) et que votre contenu est positionné (absolu ou relatif), ce dernier sort du flux et donc du conteneur. Il se placera alors par rapport au dernier parent positionné : le document.

Pour éviter ce problème, il faut absolument que le conteneur soit lui-même positionné. En lui donnant une position relative, vous pouvez garder son centrage avec marges automatiques, tout en incorporant du contenu lui aussi positionné..

Exemple de conteneur prévu pour un contenu avec des éléments positionnés :

#global {
  position: relative; /* on positionne le conteneur */
  margin-left: auto;
  margin-right: auto;
  width: ...;
  text-align: left;
}

Et voilà pour le centrage horizontal

Le centrage vertical

Pour le centrage vertical, c'est une autre histoire !

Il existe un attribut vertical-align, mais il ne permet pas :

  • De positionner verticalement un texte dans un bloc quelconque (DIV, P, etc...)
  • De positionner verticalement un bloc dans un autre bloc.

Il n'est pas fait pour ça, mais en général pour aligner deux éléments l'un par rapport à l'autre. Il n'y a que dans les cellules de tableaux (ou les éléments structurés comme tels) que cette propriété aligne tout le contenu verticalement.

Là encore, il est possible de modifier l'affichage du bloc conteneur en lui conférant l'apparence et les avantages d'une cellule de tableau (car dans ce cas, l'attribut vertical-align fonctionne), et donc de déclarer ce bloc en display: table-cell; et vertical-align: middle;

Mais une fois de plus, Internet Explorer 6 et IE7 ne gèrent pas table-cell, malheureusement.

Nous allons donc utiliser une autre solution : vous trouverez toutes les techniques d'Alsacréations dans un article dédié au centrage vertical.