Apprenez à centrer un site web au moyen des langages HTML et CSS.
Design graphique montrant le contenu d’une page centré sur un site web

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.

Capture d’écran avant (en haut) et après (en bas) du site, une fois que la page a été centrée dans la fenêtre du navigateur

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.

Cliquez sur les boutons en haut du panneau Fichiers pour passer du code source HTML à la feuille de style CSS liée

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.

Pour ouvrir le code source du panneau Fichiers, sélectionnez le 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 &quot;wrapper&quot; 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;
}

Sélectionnez Aperçu dans Google Chrome pour savoir comment la page s’affiche dans un navigateur.

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.

03/07/2022
Cette page vous a-t-elle été utile ?