Hvordan lage en webside vises på midten av skjermen

Et vanlig krav når du utformer et nettsted er å ha innholdet på siden automatisk sentrert av nettleseren, uansett hvor bredt nettleservinduet er. Du kan oppnå dette ved hjelp av stilark margin eiendom, tildele en lik margin til venstre og høyre side av siden. Fordi margbredden må endres avhengig av hvor bred den besøkendes nettleser er, bruker du auto søkeord for margin verdi. Dette forteller nettleseren for å beregne riktig margin verdien som kreves på venstre og høyre side for å sentrere siden automatisk.

Bruksanvisning

1 Åpne en web-utvikling-programmet eller tekstredigeringsprogram, og opprette en ny HTML-side.

2 Legg en div tag til siden som vil holde sentrert sideinnholdet, ved å sette inn følgende HTML-kode etter åpningen "<body>" tag.

<Div id = "pagecontent">
<P> Dette er noen eksempler på innhold </ p>
</ Div>

3 Sett bredden av innholdet på siden området, og fortelle leseren å beregne venstre og høyre marg automatisk ved å legge til følgende kode i slutten av HTML "<head>" "</ head>" -delen.

<Style type = "text / css">

pagecontent {

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

Dette forteller nettleseren for å angi bredden av pagecontent div til 910-piksler, og deretter skape like venstre og høyre marg ved hjelp av den resterende plassen på skjermen.

4 Lagre siden som "example.htm" og åpne i en nettleser. Du kan se at nettleseren har automatisk sentrert innholdet. Hvis du vil endre bredden på nettleservinduet, beregnes leseren margen for å holde siden sentrert.

Hint

  • Legg til en ramme på innholdet området ved å legge følgende til #pageContent stil:
  • border: solid #cccccc 1px;
  • Dette legger et en-pixel bred solid grå ramme rundt innholdet på siden.