U današnjem web‑dizajnu često je potrebno postaviti blok elemente – izbornike, slike, kartice ili obrasce – točno u sredinu stranice, iako njihova širina nije unaprijed određena. Pravilno centriranje podiže čitljivost, vizualnu ravnotežu i profesionalni dojam. U nastavku donosimo pregled tradicionalnih i suvremenih tehnika za horizontalno centriranje pomoću CSS‑a, uz praktične primjere koje možete odmah iskoristiti.
Sadržaj...
Zašto je horizontalno centriranje važno?
Centriranje nije samo estetska odluka; ono izravno utječe na korisničko iskustvo. Kada se sadržaj rasporedi neravnomjerno, posjetitelj može imati poteškoća s pronalaženjem ključnih informacija. Evo nekoliko tipičnih situacija u kojima je centriranje presudno:
- Navigacijski izbornici – kratki izbornici koji ne zauzimaju cijelu širinu ekrana izgledaju skladno tek kad su postavljeni u sredinu.
- Slike i ikone – u responzivnim okvirima slike se automatski prilagođavaju, a centriranje sprječava njihovo „prijanjanje“ uz rubove.
- Obrasci i kartice – kontakt obrasci ili informativne kartice često se prikazuju u središnjem stupcu kako bi privukli pažnju.
- Responsive dizajn – pri promjeni veličine zaslona elementi koji su centrirani ostaju uravnoteženi, što poboljšava izgled na mobilnim uređajima.
Klasične metode centriranja
Prije pojave fleksibilnih rasporeda, programeri su se oslanjali na nekoliko provjerenih trikova.
- Margin auto – najjednostavniji način za blokove s definiranim širinama:
margin-left: auto; margin-right: auto;. - Tekst‑poravnanje – za inline ili inline‑block elemente postavlja se
text-align: center;na roditeljskom kontejneru. - Transformacija – kombinacija
position: relative;ileft: 50%;uztransform: translateX(-50%);omogućuje centriranje elemenata nepoznate širine. - Float i relativni pomak – rješenje koje se ponekad spominje u starijim tutorijalima: element se postavi
float: left;i pomakneleft: 50%;, a potom se „vrati“right: 50%;. Iako funkcionira, zahtijeva dodatna podešavanja i nije najčišći pristup.
Iako su
