Travaux pratiques
TROISIÈME PARTIE
130
On assure donc la compatibilité avec ces anciennes versions en ajoutant cette propriété sur le conteneur. On rétablira ensuite l’alignement normal (left) dans les
paragraphes pour leur éviter d’hériter de cet alignement de texte :
Cette technique centrera horizontalement tout bloc dans son conteneur. On
n’omettra pas de préciser une largeur au bloc à centrer, sans quoi il occupera tout
l’espace disponible.
Il n’est pas possible de placer les éléments en position absolue (ou fixe) : le conteneur
étant centré tout en restant dans le flux, positionner son contenu le ferait sortir du
flux et donc du bloc. Pour cela, il est indispensable que le conteneur soit lui-même
positionné.
Nous avons vu la propriété pour positionner un élément tout en le laissant dans le
flux : position: relative. Ce positionnement relatif, sans les propriétés top, right,
bottom, ou left, permet de centrer le bloc tout en y incluant des éléments
positionnés :
Les deux paragraphes de cet exemple constituent les blocs à centrer dans l’élément