Apprenez à centrer un site web au moyen des langages HTML et CSS.
Centrage d'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.

Centrage d'un site web

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.

Ouverture du fichier center-website.html

Avant de commencer

Téléchargez et enregistrez les fichiers de projet. Ouvrez center-website.html dans Dreamweaver et affichez le code source en mode Fractionner.

Création d'une balise div "wrapper"

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>

Définition des marges avec du code CSS

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. Et votre mise en page est centrée !

CSS

#wrapper {
    ...
    margin: 0 auto;
}

Aperçu dans le navigateur

Et voilà, le tour est joué !

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.

04/13/2018
Cette page vous a-t-elle été utile ?