() translation by (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:
1 |
<div class="container"> |
2 |
... |
3 |
</div>
|
1 |
.container { |
2 |
width: 70%; |
3 |
height: 70%; |
4 |
margin: 40px auto; |
5 |
background: red; |
6 |
}
|
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.
1 |
<div class="container"> |
2 |
<div class="outer"> |
3 |
<div class="inner"> |
4 |
... |
5 |
</div>
|
6 |
</div>
|
7 |
</div>
|
1 |
.outer { |
2 |
display: table; |
3 |
width: 100%; |
4 |
height: 100%; |
5 |
}
|
6 |
.inner { |
7 |
display: table-cell; |
8 |
vertical-align: middle; |
9 |
text-align: center; |
10 |
}
|
La final vom centra elementul pe orizontală:
1 |
<div class="container"> |
2 |
<div class="outer"> |
3 |
<div class="inner"> |
4 |
<div class="centered"> |
5 |
... |
6 |
</div>
|
7 |
</div>
|
8 |
</div>
|
9 |
</div>
|
1 |
.centered { |
2 |
position: relative; |
3 |
display: inline-block; |
4 |
|
5 |
width: 50%; |
6 |
padding: 1em; |
7 |
background: orange; |
8 |
color: white; |
9 |
}
|
Î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.
