Zone Webmasters - Comment centrer des éléments en CSS?

> Accueil > Publications > XHTML & CSS > Comment centrer des éléments en CSS?

Comment centrer des éléments en CSS?

Par: Rudy | Catégorie: XHTML & CSS

Marge automatique

Cette technique est assez simple, vous devez spécifier les marges de droite et de gauche de votre bloc en automatique et il se positionnera de lui-même au centre de l'écran.

Code CSS
 .centre
{
  margin-left   : auto;
  margin-right  : auto;
  width         : 500px;
}
Code XHTML
 <div class="centre"></div>

Marge negative

Code CSS
 .centre
{
  width        : 250px ;
  height       : 200px ;
  border       : solid black 1px;
  position     : absolute ;
  top          : 50%;       /* On positionne à  50% en haut */
  left         : 50%;       /* On positionne à  50% à  gauche */
  margin-left  : -125px ;   /* On décale la boite vers la gauche de 125 pixels */
  margin-top   : -100px     /* On décale la boite vers le haut de 100 pixels */
}
Code XHTML
 <div class="centre"></div>


Imprimer cette publication




Commentaires

Commentaires



Aucun commentaire

Ajouter un commentaire

Vous devez être membre pour commenter cet article.

>> Inscrivez-vous





Faire un lien | Partenaires ©2005-2008 Rudy Onfroy Tous droits réservés Contact | RSS | Plan | Haut