Comment faire une page Web apparaît au milieu de l'écran

February 8

Une exigence commune lors de la conception d'un site Web est d'avoir le contenu de la page centrée automatiquement par le navigateur, la largeur de la fenêtre du navigateur est. Vous pouvez y parvenir en utilisant la propriété de marge de feuille de style en cascade, l'attribution d'une marge égale sur les côtés gauche et droit de la page. Parce que la largeur de la marge doit changer en fonction de la largeur du navigateur du visiteur est, vous utilisez le mot-clé automatique pour la valeur de la marge. Cela indique au navigateur de calculer la valeur de la marge correcte exigée sur les côtés gauche et droit pour centrer la page automatiquement.

Instructions

1 Ouvrez une application de développement web ou éditeur de texte, et de créer une nouvelle page HTML.

2 Ajouter une balise div à la page qui contiendra le contenu de la page centrée, en insérant le code HTML suivant après l'ouverture "<body>" tag.

<Div id = "pageContent">
<P> Ceci est une partie du contenu d'exemple </ p>
</ Div>

3 Régler la largeur de la page zone de contenu, et indiquer au navigateur de calculer automatiquement les marges gauche et droite en ajoutant le code suivant à la fin du HTML "<head>" section "</ head>".

<Style type = "text / css">

pageContent {

largeur: 910px;
margin-left: auto;
margin-right: auto;
}
</ Style>

Cela indique au navigateur de définir la largeur de la pageContent div à 910 pixels, puis créer des marges gauche et droite égales en utilisant l'espace restant sur l'écran.

4 Enregistrez la page sous "exemple.htm" et ouvert dans un navigateur Web. Vous pouvez voir que le navigateur a automatiquement centré le contenu. Si vous modifiez la largeur de la fenêtre du navigateur, le navigateur recalcule la marge pour maintenir la page centrée.

Conseils et avertissements

  • Ajouter une bordure à votre zone de contenu en ajoutant ce qui suit au style #pageContent:
  • border: 1px solid #CCCCCC;
  • Cela ajoute un 1 pixel de large bordure grise solide autour du contenu de la page.

          

Post a comment: