Travaux pratiques
TROISIÈME PARTIE
126
Centrage horizontal des éléments de contenu
Pour centrer des éléments en ligne à l’intérieur d’un bloc, il suffit d’appliquer à ce
dernier la déclaration text-align: center;. Elle portera sur tous les éléments de
contenu qu’il renferme. C’est de cette manière que l’on peut centrer horizontalement
textes et images. Le code suivant produit ainsi un affichage semblable à celui de la
figure 8-1.
Signalons à nouveau un bogue d’Internet Explorer : contrairement aux spécifications
du W3C (qu’il interprète mal), il applique aussi la propriété text-align aux éléments de type bloc. Ne vous y fiez pas : centrer les blocs de cette manière ne fonctionnera pas sur les navigateurs plus respectueux des normes.
HTML

CSS
div {
width: 350px;
height: 100px;
background: yellow;
}
.edito {
text-align: center;
}
Figure 8–1
Centrage horizontal
de contenu
RAPPEL Les méthodes d'alignement du texte
Rappelons les différentes valeurs de la propriété text-align : left, right, center, et
justify.