CSS: centrare verticala in toate browserele

In stanga am incercat sa ilustrez un element cu text centrat orizontal si rezultatul pe care vrem sa-l atingem citind acest post. Intr-o lume ideala in care standardele W3C guverneaza browserele, acest lucru se poate face foarte usor specificand ca elementul (sa zicem DIV) este o celula de tabel in care centrarea verticala este posibila nativ.

div { height: 40px; font-size: 12px; display: table-cell; vertical-align: middle; }

Cum Internet Explorer are propriile reguli, trebuie facut in asa fel incat si restul de 60% din populatia internetului sa vada corect si identic continutul. Solutia mea este urmatoarea:

div { height: 40px; font-size: 12px; padding-top: 14px; max-height: 26px; }

Pentru ca textul are o inaltime de 12 pixeli, stim ca distanta fata de border sus si jos este de cate 14 pixeli si prin padding vom distanta textul de limita superioara a elementului. Desi se vede bine pe Internet Explorer, Firefox va adauga padding-ul la inaltimea totala a elementului (din motive explicate in post-ul anterior), astfel incat div-ul va avea 54px inaltime. Solutia este atributul max-height care este recunoscut de toate browserele compatibile W3C si care va forta atributul height sa se mentina intr-o limita superioara de 26px. In Internet Explorer max-height este ignorat.

Si o reprezentare grafica a felului in care este interpretat CSS-ul (partea hasurata este padding-ul):

Lucrurile marunte dau un rezultat bun in ansamblu :)

Post-uri cu tematica asemanatoare

• Box model: Microsoft vs W3C
• CSS: linie punctata in jurul link-urilor
• CSS