Apprenez à centrer un site web au moyen des langages HTML et CSS.
Ce qu'il vous faut
Reportez-vous aux tutoriels Manipulation de mises en page HTML et Mise en page web avec CSS pour de plus amples informations sur une mise en page web en HTML et CSS.
Lorsque vous créez une page web, son contenu se positionne à gauche par défaut. Or, une présentation centrée, bien souvent plus esthétique, attirera davantage l’attention. Il importe donc de structurer correctement la page en HTML, puis de lui appliquer des feuilles de style CSS pour la centrer dans le navigateur.
Avant de commencer
Téléchargez et enregistrez les fichiers du projet. Ouvrez center-website.html dans Dreamweaver et affichez le code source en mode Fractionner.
Création d’une balise div « wrapper »
Insérez des balises <div> entre deux balises <body> de manière à délimiter leur contenu. La balise <div> « englobant » la totalité du contenu, attribuez à la balise <div> un id « wrapper ». N’oubliez pas la balise </div> de fin !
L’insertion de balises <div> de part et d’autre du contenu sur une page facilite l’application de feuilles de style CSS régissant intégralement cette partie. Ici, nous allons utiliser du code CSS pour centrer la totalité du contenu.
HTML
<div id="wrapper">
(contenu)
</div>
![Créez une balise div "wrapper" dans le code source HTML](/content/dam/help/fr/dreamweaver/how-to/center-website/jcr%3acontent/main-pars/image2/center-website-step4.jpg.img.jpg "Créez une balise div "wrapper" dans le code source HTML")
Définition des marges avec du code CSS
Ouvrez style.css et localisez la section /* Start Here */.
Choisissez Affichage et désélectionnez Fractionner verticalement. Vous superposez ainsi l’affichage du code et l’affichage en direct, ce qui permet de contrôler plus facilement le centrage du contenu.
Ajoutez une propriété margin: au sélecteur #wrapper correspondant à l’id de la balise <div> en HTML.
La propriété margin accepte 4 valeurs pour top, right, bottom, left respectivement. La feuille de style CSS complète serait margin:0 auto 0 auto; mais étant donné que les valeurs top et bottom sont égales et que les valeurs left et right le sont aussi, vous pouvez tout simplement écrire :
margin: 0 auto;
Les valeurs supérieures et inférieures sont égales à 0 puisqu’on ne laisse d’espace ni en haut, ni en bas. Les marges gauche et droite sont réglées sur auto, de manière à répartir équitablement l’espace entre les deux. Votre mise en page est ainsi centrée !
CSS
#wrapper {
...
margin: 0 auto;
}
Cliquez sur Aperçu dans le navigateur et choisissez le navigateur dans lequel vous souhaitez visualiser le résultat.
Vous devrez enregistrer vos fichiers pour voir les modifications.
