Comment centrer une page dans la fenêtre du navigateur avec CSS

Pour centrer une page, il faut dans la page HTML mettre tout le contenu de la page dans une balise div identifié par id= »conteneur ». Puis dans le code css déclarer margin:auto;.

Il faut également avoir un des doctypes suivant :

XHTML 1.0 STRICT

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
ou

XHTML 1.0 TRANSITIONAL

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">	

ou

XHTML 1.0 FRAMESET

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
	   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

ou

XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

ou

HTML 4.0 STRICT

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	   "http://www.w3.org/TR/html4/strict.dtd">
ou

HTML 4.0 TRANSITIONNAL

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	   "http://www.w3.org/TR/html4/loose.dtd">

ou

HTML 4.0 FRAMESET

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
	   "http://www.w3.org/TR/html4/frameset.dtd">

ATTENTION LE DOCTYPE DOIT INCLURE UNE URI COMPLETE
Si il n'y a pas d'URI complète en fin de balise ou s'il n'y a pas de doctype cela ne marche pas.

Code HTML ou XHTML :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	   "http://www.w3.org/TR/html4/strict.dtd">
<html>
     <head>
     </head>
     <body>
          <div id="conteneur">
          Tout le code de la page
          </div>
     </body>
</html>

Code CSS :

body{
    margin:0;
    padding:0;
    }
#conteneur{
    margin:auto;
   padding: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

%d blogueurs aiment cette page :