Centriranje pomoću CSS-a

U ovom članku, 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;.