CSS_ Centrer un objet

03/02/2019 CSS: Centrer un objet
Feuilles de style pour le Web
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
Centrer un bloc ou une image
Centrer verticalement
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:
Trucs & astuces CSS
DES LIGNES DE
CENTRER
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 }
IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto }
...
L'image suivante est centrée:
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'.
UN BLOC OU UNE
CENTRER
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
}
...
Cet étroit...
Cet étroit bloc de
texte est centré.
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 }
...
Ce court paragraphe...
https://www.w3.org/Style/Examples/007/center.fr.html?fbclid=IwAR1XXnwAmczo3Jmd_-Y97TK8bArgnwLVyOOtXbuhklMPyNh0GkCHZFBJgh8 1/2

03/02/2019 CSS: Centrer un objet
Ce court paragraphe est centré
verticalement.
Bert Bos, coordinateur de l'activité
style
Copyright © 1994–2018 W3C ® Privacy
policy
Created 5 May 2001;
Last updated mer. 26 sept. 2018 04:41:20 UTC
LANGUES
Azərbaycan
Deutsch
Ελληνικά
English
Español
Français
Bahasa Indonesia
Norsk
Nederlands
Polski
Português
Português brasileiro
Русский
ไทย
Tagalog
Українська
Tiêńg Việt
简 体 中 文
繁 體 中 文
À propos des traductions
Български
https://www.w3.org/Style/Examples/007/center.fr.html?fbclid=IwAR1XXnwAmczo3Jmd_-Y97TK8bArgnwLVyOOtXbuhklMPyNh0GkCHZFBJgh8 2/2