Information om saucer.dk

Horisontal og vertikal centrering

Med denne artikel kan du se, hvordan man laver en horisontal og vertikal centrering på en div med faste mål ved, at bruge position:absolute;

Jeg går ud fra at du har før arbejdet med CSS og har en rimlig kendskab til sproget.

Det første vi skal have styr på er, hvor stor vores tabel / div skal være. Jeg har valgt at lave
en side på 440 * 300. Der efter skal vi ha sat "position" til position: absolute; + at margin og padding skal sættes til 0px i body.

<style type="text/css">

body {
margin:0px;
padding:0px;

}

#center {

width: 440px;
height: 300px;

position: absolute;


}
</style>


Nu hvor vi har størelsen og position af vores tabel / div, skal vi ha sat margin på top og left. For at finde top margin skal vi dividere sidens brede med 2. Det vil sige 440 / 2 = 220. Og det samme gøre vi med vores venstre / left margin. Der efter skal vi huske at sætte vores resultat i minus. Altså -220 og -150. Grunden komme lidt længe nede i artiklen, så hæng på.

<style type="text/css">

body {
margin:0px;
padding:0px;

}

#center {

width: 440px;
height: 300px;

position: absolute;

margin-left: -220px;
margin-top: -150px;

}
</style>


Til sidst skal vi sætte top og left til 50%. Det gøre at vores position starter i midten af browserens-vindue. Det er også der for vi havde sat margin-top/left i minus.

Og hvorfor så det ?
CSS beregner position fra punktet som er sat og ned ad. Det vil sige at vores kasse vil starte med venstre-top hjørne i midten af skærmet. Og det vil så give os en skæv placereing. Der for trækker vi ½ af kassens højde og brede og på den måde rykker vores positions punkt.

<style type="text/css">

body {
margin:0px;
padding:0px;

}

#center {

width: 440px;
height: 300px;

position: absolute;

margin-left: -220px;
margin-top: -150px;


left: 50%;
top: 50%;

}
</style>


Nu hvor vi har vores CSS kode, mangler vi kun at lave en tabel / div som vil blive styrert af vores kode.

<div id="center">Woo Hoo, det virker.</div>


OBS
Hvis du ønsker at bruge border og padding i selve tabelle / div så skal du også trække det fra når du skal skrive margin-left og margin-top.

<style type="text/css">

body {
margin:0px;
padding:0px;

}

#center {

width: 440px;
height: 300px;
padding:10px;
border:1px solid #000000;

position: absolute;

margin-left: -231px;
margin-top: -161px;


left: 50%;
top: 50%;

}
</style>


Jeg håber at I har kunne bruge artiklen til at komme vider med webdesign og webudviklingen. Hvis i har spørgsmål til artiklen så kan I frit bruge kommentra form til at give inputs.

God arbejdsløst.

Med venlig hilsen Srdjan Lukic-Bardak

kategori pil CSS (1)

kategori pil MySQL (1)

kategori pil PHP (1)



Skriv kommentar


"2"