Centrage des éléments en CSS
CHAPITRE 8
131
Centrage en positionnement absolu
On peut encore recourir à un positionnement absolu assorti de marges négatives,
technique capable d’aligner les blocs aussi bien horizontalement que verticalement.
Signalons toutefois que cette méthode est moins ergonomique et causera des soucis
d’affichage dans certaines conditions (rétrécissement de la fenêtre). Elle ne devra être
employée que lorsque la méthode de centrage décrite précédemment ne convient pas.
Commençons par l’étude du centrage horizontal.
Il s’agit de placer le bloc à la position absolue left: 50%; : son côté gauche se trouve
alors au centre de la page. Il faut donc décaler le bloc à gauche de la moitié de sa largeur en fournissant une valeur négative à la propriété margin-left.
En pratique, pour centrer horizontalement un bloc
CHAPITRE 8
131
Centrage en positionnement absolu
On peut encore recourir à un positionnement absolu assorti de marges négatives,
technique capable d’aligner les blocs aussi bien horizontalement que verticalement.
Signalons toutefois que cette méthode est moins ergonomique et causera des soucis
d’affichage dans certaines conditions (rétrécissement de la fenêtre). Elle ne devra être
employée que lorsque la méthode de centrage décrite précédemment ne convient pas.
Commençons par l’étude du centrage horizontal.
Il s’agit de placer le bloc à la position absolue left: 50%; : son côté gauche se trouve
alors au centre de la page. Il faut donc décaler le bloc à gauche de la moitié de sa largeur en fournissant une valeur négative à la propriété margin-left.
En pratique, pour centrer horizontalement un bloc
large de 200px dans un conteneur
large de 300px, on procède comme suit : positionnement absolu du paragraphe
(left à 50%) puis décalage à gauche de la moitié de sa largeur (margin-left de -100px).
La figure 8-4 illustre le résultat de cette technique :
Pour le centrage horizontal, cette méthode n’apporte rien à la technique de marges automatiques présentée plus haut. En revanche, elle autorise l’alignement vertical des blocs.
CSS
div#conteneur {
position: relative;
background: yellow;
width: 300px;
height: 100px;
}
div#conteneur p {
position: absolute;
left: 50%;
margin-left: -100px; // (décalage de la moitié de la largeur de l’objet)
background: #ccc;
width: 200px;
}
HTML
Figure 8–4
Centrage horizontal
en position absolue
(left à 50%) puis décalage à gauche de la moitié de sa largeur (margin-left de -100px).
La figure 8-4 illustre le résultat de cette technique :
Pour le centrage horizontal, cette méthode n’apporte rien à la technique de marges automatiques présentée plus haut. En revanche, elle autorise l’alignement vertical des blocs.
CSS
div#conteneur {
position: relative;
background: yellow;
width: 300px;
height: 100px;
}
div#conteneur p {
position: absolute;
left: 50%;
margin-left: -100px; // (décalage de la moitié de la largeur de l’objet)
background: #ccc;
width: 200px;
}
HTML
Un texte centré
Figure 8–4
Centrage horizontal
en position absolue