CSS: Kako centrirati sadržaj na stranici?

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.

1

Komentari

Ovaj post je baš tako fino, gender-neutral, napisan :)

2

nadasve elegantno riješenje

I Like It ;-))

e, sat, mene bi zanimalo ~ jel ovo radi posvud ili samo negdje

btw, 'centriranje' me podsjetilo na jednu, moglo bi se reć, 'prostu' pjesmicu

3

glede I Like It:

jeli, blufonac, kat buš se integriral sa fejzbukom ;-))

čak i Jutarnji List ima

* Sviđa mi se
* Budi prvi od svojih prijatelja kojim se svidja ovo
* Facebook društveni dodatak
* Objavi komentar na moj Facebook profil
* itd itd itd...

ajde, izjasni se...

nemoj šutit...

ps: alaj ga cimam ;-)

4

Deda: Radi posvuda, čak i u IE6.
A na Face idemo jednog dana. Neću ti reći kad. ;)