Centrer un élément en CSS

Il existe plusieurs méthodes pour centrer un élément horizontalement.

  1. La première méthode, la plus ancienne, est en HTML grâce à la balise <center></center>. Celle-ci est efficace mais à éviter car elle mélange la mise en forme et le code rendant la lecture et les modifications éventuelles plus difficile. De plus elle est dépréciée en HTML4.01.
  2. La seconde, encore utilisée, est la propriété text-align. Celle-ci pose plusieurs problèmes. Tous d’abord elle n’a pas le même comportement d’un navigateur à un autre. De plus elle doit être spécifié pour le parent de la div à centrer et va donc potentiellement affecter tout le contenu du dit parent.
  3. La meilleure méthode consiste à utiliser la propriété margin. Il est nécessaire pour pouvoir centrer une div par cette méthode de lui donner une largeur (voir exemple ci-dessous).
Div A
Div B
#a{ background-color:aqua; width:400px; height:100px; } #b{ background-color:red; width:200px; margin:auto; }

exemple de div centrée avec margin
exemple de div centrée avec margin

This entry was posted in CSS and tagged , , . Bookmark the permalink. Trackbacks are closed, but you can post a comment.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>