Yesterdayishere.com » Centriranje pomoću CSS-a

Centriranje pomoću CSS-a

Web dizajn - 21/12/2004 at 17:59 CET

U ovom čanku, opisane su metode horizontalnog centriranja elemenata pomoću CSS-a.

Primjere vezane uz ovaj članak možete pogledati ovdje.

Centriranje block-level elemenata

Kada želimo centrirati block-level element na stranici, poput DIV-a, činimo to propertyjem margin:

margin-left: auto; margin-right: auto;

ili kraće

margin: 0 auto

DIV je centriran zahvaljujući lijevoj i desnoj margini, čija je vrijednost podešena na “auto”. “Auto” znači: onoliko koliko treba, odnosno, browser automatski prilagođava margine u odnosu na element.

Na ovaj način valja centrirati kompletnu stranicu — sav sadržaj je dovoljno ubaciti unutar jednog DIV elementa i zatim mu odrediti širinu i centrirati ga. Primjer slijedi.

CSS:
#wrap { width: 700px; margin: 0 auto }

HTML:
<div id="wrap"> ... </div>

Centriranje teksta

Želimo li centrirati tekst u naslovu (heading) ili pak paragrafu, služimo se propertyjem text-align na sljedeći način:

h1 { text-align: center }

Centriranje slika

Slike možemo centrirati metodom centriranja block-level elemenata, uz dodatak display: block, jer je IMG inline element.

img { margin: 0 auto; display: block }

Muke po Exploreru

Kao što je već opisano, centriranje cijele stranice je jednostavno. No, po dobrom, starom običaju, IE je tu da malo zakomplicira stvari. IE5/Win ne centrira element, pa ako marite za taj prastari browser, treba dodati sljedeće:

body { text-align: center }

Naime, IE5/Win pogrešno interpretira text-align: center i centrira i DIV sadržaj u njemu. Workaround je jednostavan, ali zahtijeva dodatno dotjerivanje CSS kôda: text-align: center će dovesti do centriranja inline elemenata unutar DIV-a, za koji moramo dodati text-align: left;.

-- End of post --

3 Responses

  1. hvala na ovome, puno mi pomoglo ;)

    Author: Pero, February 25th, 2006 at 14:38

  2. A ovo je stvarno pomoglo. Nešto tako banalno ali nigdje nisam nabasao na to. Hvala

    Author: ico, August 18th, 2006 at 11:22

  3. hvala i od mene. mucio sam se dugo s ovim explorerom da bih na kraju ovdje pronasao rjesenje

    Author: hrvoje, October 17th, 2007 at 22:22

Leave a Reply

Please Note: Your e-mail address is required, but never displayed. Your comment must be approved before it is displayed, so please do not post more than once.

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>