FAQ version Beta 0.5
Positionnement, alignement, centrage
Comment centrer horizontalement un élément ?
1- Vous voulez centrer horizontalement un élément de type "en-ligne" dans un bloc
La propriété CSS "text-align" est prévue pour s'appliquer sur un élément bloc (conteneur) et contrôlera l'alignement (gauche, droite, centré, justifié) de tous les élements de type "en-ligne" contenus dans ce bloc conteneur.
--> http://www.yoyodesign.org/doc/w3c/css2/text.html#alignment-prop
Il vous suffit donc par exemple de procéder ainsi pour centrer une image au sein d'un bloc <div> :
<div class="centrage"><img src="…" alt="…" /></div>
div.centrage {text-align: center;}
2- Vous voulez centrer horizontalement un élément de type "bloc" dans un bloc ou sur la page
Il y'a deux méthodes :
- le centrage à l'aide des marges latérales automatiques
- le centrage à l'aide du positionnement absolu et des marges négatives (à déconseiller sauf cas extrême)
Les deux techniques sont expliquées en détail dans un tutoriel Alsacréations :
http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Centrer-les-elements-ou-un-site-web-en-CSS
La propriété CSS "text-align" est prévue pour s'appliquer sur un élément bloc (conteneur) et contrôlera l'alignement (gauche, droite, centré, justifié) de tous les élements de type "en-ligne" contenus dans ce bloc conteneur.
--> http://www.yoyodesign.org/doc/w3c/css2/text.html#alignment-prop
Il vous suffit donc par exemple de procéder ainsi pour centrer une image au sein d'un bloc <div> :
<div class="centrage"><img src="…" alt="…" /></div>
div.centrage {text-align: center;}
2- Vous voulez centrer horizontalement un élément de type "bloc" dans un bloc ou sur la page
Il y'a deux méthodes :
- le centrage à l'aide des marges latérales automatiques
- le centrage à l'aide du positionnement absolu et des marges négatives (à déconseiller sauf cas extrême)
Les deux techniques sont expliquées en détail dans un tutoriel Alsacréations :
http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Centrer-les-elements-ou-un-site-web-en-CSS
Liens complémentaires