Ceci est une traduction. Elle peut avoir des erreurs ou être dépassée par rapport à la version anglaise. Traducteur(-trice): Laurent Carcone
Voir également l'index de tous les trucs et astuces.
Une tâche fréquente en CSS est de centrer du texte ou des images. Il y a 3 types de centrage:
Le plus fréquent (et donc) le plus facile des types de centrage est de centrer des lignes de texte dans un paragraphe ou dans un titre. CSS possède la propriété 'text-align' pour cela:
P { text-align: center } H2 { text-align: center }
Chaque ligne d'un P ou d'un H2 est centrée entre les marges, comme ceci:
Les lignes à l'intérieur de ce paragraphe sont toutes centrées entre les marges du paragraphe, grâce à la valeur 'center' de la propriété CSS 'text-align'.
Quelquefois, ce n'est pas le texte qui doit être centré, mais le bloc dans son ensemble qui doit l'être. Ou bien, exprimé différemment: on veut que les marges droite et gauche soient égales. La manière de faire cela est de fixer les marges à 'auto'. C'est normalement utilisé avec un bloc de largeur fixe, car si le bloc est lui-même flexible, cela prendra toute la largeur disponible. Voici un exemple:
P.blocktext { margin-left: auto; margin-right: auto; width: 6em } ... <P class="blocktext">Cet étroit...
Cet étroit bloc de texte est centré. Notez que les lignes à l'intérieur du bloc ne sont pas centrées (elles sont alignées à gauche), contrairement à l'exemple précédent.
C'est également la façon de centrer une image: placez-la dans un
bloc spécifique et appliquez lui la propriété margin
. Par exemple:
IMG.displayed { display: block; margin-left: auto; margin-right: auto } ... <IMG class="displayed" src="..." alt="...">
L'image suivante est centrée:
CSS niveau 2 ne possède pas de propriété pour centrer des objets verticalement. Il y en aura probablement une en CSS niveau 3. Mais vous pouvez toutefois centrer des blocs verticalement en CSS2 en combinant quelques propriétés. L'astuce est de spécifier que le bloc extérieur doit être formaté comme un tableau, parce que les contenus d'une cellule d'un tableau peuvent être centrés verticalement.
L'exemple ci-dessous montre comment centrer un paragraphe à l'intérieur d'un bloc qui possède une certaine hauteur donnée. Un autre exemple montre un paragraphe centré verticalement dans la fenêtre du navigateur, parce qu'il est à l'intérieur d'un bloc qui est positionné de manière absolue et d'égale hauteur que la fenêtre.
DIV.container { min-height: 10em; display: table-cell; vertical-align: middle } ... <DIV class="container"> <P>Ce court paragraphe... </DIV>
Ce court paragraphe est centré verticalement.
Created 5 May 2001;
Last updated mer. 06 janv. 2021 05:40:49 UTC