Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

Sfântul Graal al Centrării în CSS

by
Difficulty:BeginnerLength:ShortLanguages:

Romanian (Română) translation by Stefan Dragoi (you can also view the original English article)

Chris Coyier a publicat recent pe siteul său, CSS Tricks, un arbore decizional pentru a demonstra multitudinea de posibilităţi de a centra elementele orizonal sau vertical utilizând CSS. Ca soluţii independente toate au anumite limitări, dar combinate reprezintă o soluţie versatilă ce funcţionează excelent în IE8 şi browsere mai noi.

Iată cum trebuie procedat.

Blocurile de început

Dacă construieşti un site responsive, mai mult ca sigur dimensiunile blocurilor vor fi stabilite în procente, aşa că prima dată creăm un element .container oarecare:

Pentru a fi siguri că elementul nostru se extinde corespunzător, setăm html, body { width: 100%; height: 100%; }.

Puterea tabelelului

Alinierea centrală pe verticală în interiorul acestui .container se obţine după modelul tabelului. Această metodă ia elementele normale de tip block şi le face să se comporte ca celulele unui tabel, oferindu-ne astfel posibilitatea centrării verticale.

La final vom centra elementul pe orizontală:

În interior poţi introduce orice doreşti, inclusiv blocuri de text cu înălţime variabilă sau elemente poziţionate absolut.

Modificări

Pentru a schimba centrarea pe orizontală a elementului trebuie modificată proprietatea text-align a elementului .inner, iar pentru a schimba centrarea pe verticală se modifică proprietatea vertical-align a aceluiaşi element .inner.

Concluzie

Acest exemplu poate părea că foloseşte multe elemente, dar piesele de bază sunt cele trei div-uri: .outer, .inner, şi .centered. Stilizarea acestor elemente este consistentă, astfel că poţi folosi acest exemplu în fişierele CSS de bază în orice proiect.

Există un element mai mare şi mai puternic decât orice tehnică de centrare a conţinutului şi care dă rezultate perfecte. Speranţa este ca acest element să devină standard, pentru a pune capăt oricăror nedumeriri şi plângeri legate de centrarea elementelor în CSS.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.