Centrage des pages en css

0003 La mise en page centrée permet à un site d’occuper un place agréable même avec des écrans larges. Comme beaucoup d’internautes sont encore équipés d’écran avec une résolution de 800 pixels de large, nous avons vu dans l’article 002 que la largeur moyenne idéale pour les sites grands public est de 770 pixels, ce qui est peu pour des écrans de résolution supérieure à 1000 pixels, surtout si l’on a choisi un fond blanc qui est souvent nécessaire.

La solution que je retiens pour les sites grand public est donc d’englober le contenu dans un conteneur centré de 77O pixel en utilisant les css bien sur.
#conteneur {width: 770px;}
Dans les sites anglais ce style se nomme souvent wrap.


La meilleure façon de centrer les éléments dans IE5.5/Win consiste à déclarer textalign: center. La spécification CSS énonce clairement que la propriété text-align ne devrait pas servir à centrer des éléments, mais elle le fait dans IE5.5/Win.

Je défini donc ainsi la balise body
body {margin: 0; padding:0; text-align: center;}
et la balise conteneur ainsi
#conteneur {width: 770px; margin: 0px auto; text-align: left;}

Attention en utilisant margin: 0px auto 0px pour la balise conteneur, c’est à dire en précisant des valeur pour le top et le bottom, Safari/Mac ne centre rien du tout… c’est pour cela que je me contente d’écrire ….margin: 0px auto;….

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s