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).
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>
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: ...;
}
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;
text-align: center;
}
Il faudra ensuite rétablir l'alignement texte dans #global, ce qui donne :
#global {
margin-left: auto;
margin-right: auto;
width: ...;
text-align: left;
}
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;
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 "feinter" en faisant croire que le bloc conteneur est une cellule de tableau (car dans ce cas, l'attribut vertical-align fonctionne), et donc de déclarer ce bloc en display: table-cell;
Mais une fois de plus, IE ne gère pas le table-cell, malheureusement. Nous allons donc utiliser une autre solution : vous trouverez dans les astuces d'Alsacréations plusieurs pistes pour aligner du contenu verticalement.
Les marges négatives
Préambule : Les marges négatives en CSS posent des problèmes sur Explorer Mac ainsi que divers problèmes lors du redimensionnement de la page (bords mangés, pas de barre de défilement horizontal quand on réduit la page, etc.). Il est donc fortement conseillé d'éviter cette méthode sauf si vous en maîtrisez les conséquences.
La technique des marges négatives permet de centrer un bloc dont on connait les dimensions (pour centrer des éléments non-blocs comme des textes,
Le centrage pourra être horizontal, vertical ou les deux à la fois.
Prenons un bloc conteneur de 700px de large et 400px de haut. Nous voulons qu'il soit centré exactement dans le navigateur quelle que soit la résolution (800x600, 1024x768 ou plus).
Pour cela, l'astuce est de placer dans un premier temps ce bloc à top 50% et left 50%, ce qui placera le coin supérieur gauche du bloc au milieu de page.
Ensuite, nous définirons des marges négatives dont la valeur est exactement la moitié de la largeur et hauteur du bloc, ce qui le positionnera au milieu de page.
Voici le code CSS du bloc conteneur :
#global {
position:absolute;
left: 50%;
top: 50%;
width: 700px;
height: 400px;
margin-top: -200px;
margin-left: -350px;
border: 1px solid #000;
}
Il suffit ensuite de placer le conteneur juste en-dessous de la balise <body> :
<div id="global"></div>
