Hvordan Sentrer en absolutt Div

Sentre et element ved hjelp av absolutt posisjonering kan lage en nettside ser mer profesjonell og strømlinjeformet. Elementet vil alltid vises i midten av siden, og kan ikke flyttes av ulike nettlesere. Teknikken kommer med noen quirks. Få kode ned nøyaktig og visualisere hva du vil skal vises på siden bør gjøre prosessen strømlinjeformet og vellykket.

Bruksanvisning

Visualiser nettstedet ditt og skrive det på papir

1

Tegn på nettstedet ditt på papir, i stedet for å holde det hele i hodet ditt, før du begynner koden. Det hjelper å visualisere trinnene. Koden vil være mer fornuftig hvis du kan tenke gjennom det på papir.

2 Åpne din stilark og skriv inn følgende for elementet som du vil plassere i midten:

navn på elementet for å sentrere {

position: absolute;
top: 0px;
left: 50%;
margin-left:-75px;

}

Innstilling til venstre til "50%" vil gjøre elementet starter på døde midt på siden fordi det begynner halvveis (eller 50 prosent fra venstre horisontale aksen).

3 Lagre den nye stilarket og laste den opp til din nettside gjennom cPanel (kontrollpanelet). Forhåndsvis siden og se om elementet er riktig plassert.

Posisjonering og Sentre flere elementer

4 Tildele en z-indeks til elementer å rangere som vises over de andre hvis du planlegger å stable mer enn ett element, eller hvis du har en blokk med tekst som du vil skal vises på toppen av plassert element.

5 Sett elementet til -1 hvis du vil det skal vises under en blokk med tekst:

navn på elementet for å sentrere {

position: absolute;
top: 0px;
left: 50%;
margin-left:-75px;
z-index: -1;

}

6

Stable flere innslag i sentrum ved å gi riktig z-index til hver enkelt. For eksempel, hvis du har tre bilder som du ønsker å stable oppå hverandre fra minst til størst, gjør du følgende:

senterelement små {

position: absolute;
top: 0px;
left: 50%;
margin-left:-75px;
z-index: 1;

}

senterelement midt {

position: absolute;
top: 0px;
left: 50%;
margin-left:-75px;
z-index:2;

}

senterelement stor {

position: absolute;
top: 0px;
left: 50%;
margin-left:-75px;
z-index: 3;

}