Skip to the main content
[] 16. kolovoza 2010.

Imaš primjerice neki omanji sadržaj tipa "Stranica je u izradi" i želiš ga fino pozicionirati u centar stranice, da bude u središtu web stranice i horizontalno i vertikalno.

To je najlakše napraviti pomoću tablice, ali ne smiješ ni pod razno, jer tablice su odavno izašle iz mode i mogao bi ti se smijat netko tko slučajno zaviri u HTML kod.

Raznih JavaScript te CSS rješenja ima za olimpijski bazen napuniti, no ovdje ću navesti jedno krajnje jednostavno rješenje koje koristi poneki CSS trik.

• • •

Ideja se sastoji u tome da se koriste 2 DIV elementa iste veličine:

1. vanjski DIV (wrapper) je apsolutno pozicioniran s donjim desnim kutem na sredini ekrana (bottom: 50% i right: 50%)

2. unutarnji DIV (container) je relativno pozicioniran u odnosu na njega s tim da je gornji lijevi kut na sredini vanjskog elementa (top: 50% i left: 50%)

Ilustrirano to izgleda ovako:

CSS Centered DIV

Dakle donji desni kut wrappera je sredina ekrana (točka A), a gornji lijevi kut containera sredina wrappera (točka B).

Cijeli CSS skoro da u SMS poruku stane:

#wrapper, #container { width: 400px; height: 300px }
#wrapper { position: absolute; bottom: 50%; right: 50% }
#container { position: relative; left: 50%; top: 50%; background: #ff0 }

Vidi demo.

Izvor.


PS. 7 finih satova napravljenih pomoću CSSa i JavaScripta.