Comment centrer une balise « div » en CSS
Ce tutoriel vous explique comment centrer une balise html de type « div » de manière à organiser la mise en page de votre site internet.
Cela peut s'avérer très utile si vous souhaitez que votre site web s'affiche systématiquement au centre de la page du navigateur.
Centrer votre page web automatiquement
Nous utiliserons les langages suivants :
- HTML5
- CSS3
Nous prendrons pour exemple une page HTML classique sur laquelle nous attachons notre fichier CSS qui servira par la suite.
<!-- Fichier HTML --> <html> <head> <link rel="stylesheet" href="design.css" media="screen" /> </head> <body> </body> </html>
Création du container
Ajoutez une balise « div » à l'intérieur du « body » avec un id nommé « container »
Vous pouvez lui donner le nom que vous souhaitez.
<body> <div id="container"> <!-- Votre contenu --> </div> </body>
La partie CSS
Le fichier « CSS : design.css ».
Nous optons dans cet exemple pour un positionnement à largeur fixe d'une taille 980px.
// Fichier CSS /* Couleur du fond */ body { background-color: #fcfdf9; } /* Votre contenu */ #container { width:980px; // Taille de votre contenu centré margin-left:auto; margin-right:auto; margin-top:0px; position:relative; }
Votre contenu est désormais centré avec une largeur fixe.
Vous pouvez aussi adapter le fond de votre page avec un motif par exemple.
Nasser AGOUDJIL