Elementele de centrare vertical pe css pur

Până în prezent, CSS a reprezentat o problemă că funcționează în principal pe o axă. În funcție de context, aceasta poate fi o axă verticală sau orizontală. Și acest lucru este minunat pentru un teanc de elemente de bloc (situate una după alta), de exemplu:







afișare: bloc; lățime: 100%;

Blochează și blochează elemente cu câmpuri

Elementele care sunt declarate ca bloc inline sau bloc pot fi aliniate orizontal în centru folosind margini stânga și dreapta, care sunt calculate automat:

afișare: bloc; margin-stânga: auto; margin-dreapta: auto;

Folosind un tabel

O modalitate simplă și rapidă de a obține elementul centrat pe verticală este de a face elementul o celulă de tabelă: de exemplu, folosind afișarea: tabelul și afișajul: celulă de tabel și aplicarea vertical-align: middle style;







Dacă centralizați elemente utilizând transformarea CSS 2D, utilizatorii care sunt, din nefericire, blocați în browserele vechi (motivul este că nu vor să se actualizeze sau nu știu cum sau din cauza limitărilor companiei în care lucrează) nu vor fi întreținute. Pentru ei, site-ul dvs. nu va arata exact asa cum este. Dar puteți utiliza o opțiune de backup - de exemplu, folosiți Modernizr pentru a detecta absența transformării CSS și a utiliza metode alternative pentru a obține același efect asupra browserelor care nu acceptă această tehnologie.

Pentru a sprijini utilizatorii WebKit, va trebui să utilizați prefixul specific pentru browserele de pe acest motor, adică "web". Acesta este un pic ciudat, deoarece versiunile Internet Explorer, și anume 10 și mai sus, suportă proprietatea transformă fără a fi nevoie de prefixul -ms.

În plus, puteți susține ideea de degradare grațioasă (reluarea interfețelor web client) și îmbunătățirea progresivă (îmbunătățire progresivă), care permite utilizatorilor să utilizeze un site web imperfect vizual dar complet funcțional.







Articole similare

Pagina anterioară

Pagina următoare

Trimiteți-le prietenilor: