Travaux pratiques
TROISIÈME PARTIE
128
Cela permet de centrer verticalement son contenu, comme on l’observe figure 8-2.
Centrage des blocs et conteneurs
Pour centrer les blocs et grandes zones de la page, la propriété text-align ne fonctionne plus : elle ne porte que sur les éléments en ligne.
Centrage horizontal des conteneurs
Il existe deux techniques principales pour centrer des éléments voire la page tout
entière dans la fenêtre de visualisation. La première conserve le positionnement dans
le flux ; la seconde en sort par l’emploi de positions absolues. On choisira l’une ou
l’autre en fonction des contraintes et de la configuration recherchée.
Centrage dans le flux courant
On centre un bloc dans son conteneur en lui spécifiant une largeur (width) et des
marges latérales automatiques. L’exemple suivant, représenté figure 8-3, centre deux
paragraphes dans un bloc
.
CSS
div#conteneur {
background: yellow;
height: 80px;
line-height: 80px;
width: 300px;
}
Figure 8–2
Centrage vertical
du contenu
HTML

Un bloc centré


Un second bloc centré


Précédent

- 155/337

Suivant