Langues

Ceci est une traduction. Elle peut avoir des erreurs ou être dépassée par rapport à la version anglaise. Traducteur(-trice): Laurent Carcone

Feuilles de style pour le Web Trucs & astuces CSS

Voir également l'index de tous les trucs et astuces.

Centrer un objet

Une tâche fréquente en CSS est de centrer du texte ou des images. Il y a 3 types de centrage:

Centrer des lignes de texte

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'.

Centrer un bloc ou une image

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: some random image

Centrer verticalement

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.

Bert Bos, coordinateur de l'activité style
Copyright © 1994–2021 W3C® Privacy policy

Created 5 May 2001;
Last updated mer. 06 janv. 2021 05:40:49 UTC

Langues

À propos des traductions