Css aliniere verticală pentru toate, css

Alinierea textului vertical în CSS - un loc de muncă foarte dificilă. Am văzut destui oameni se luptă cu acest lucru, și-au găsit în mod constant erori „critice“ atunci când vine vorba de design real adaptive.

Discutați despre CSS proprietate aliniere verticală

Când am început să lucreze în dezvoltarea web, apoi un pic dur cu această proprietate. M-am gândit că ar trebui să funcționeze ca proprietate clasică „text-align“. Ah, dacă ar fi așa de simplu.

proprietate CSS vertical-align funcționează perfect cu mese, dar nu cu div, sau alte elemente. Când îl utilizați pentru div. aliniază elementul relativ la celelalte blocuri, dar nu și conținutul. Atunci când această caracteristică funcționează numai cu un display: inline-bloc; .

Dorim să centrați conținutul, și nu div!

Ai două opțiuni. Dacă aveți doar un element div cu text, puteți utiliza proprietatea line-height. Acest lucru înseamnă că trebuie să știți înălțimea elementului, dar acesta nu poate fi instalat. Astfel, textul va fi întotdeauna în centru.

Adevărat, această abordare CSS aliniere verticală are un dezavantaj. Dacă textul multilinie, atunci înălțimea liniei va fi înmulțită cu numărul de rânduri. Cel mai probabil, în acest caz, va trebui să impună o pagină oribilă.

Aruncati o privire la acest exemplu

În cazul în care conținutul pe care doriți să centru, este format din mai mult de o linie, atunci este mai bine să utilizați un div tabel. Puteți utiliza, de asemenea, masa, dar nu este corect semantic. Dacă aveți nevoie de pauze pentru scopuri adaptive, este mai bine să utilizeze elementele div.

Pentru ca acest lucru să funcționeze, trebuie să fie containerul părinte pentru a afișa: tabel. și în interiorul acestuia - numărul dorit de coloane pe care doriți să le aliniați folosind display-ul: tabel de celule și verticală-align: mijloc.

De ce nu funcționează cu aspectul de masă, dar cu elemente de div. Deoarece înălțimea rândurilor în același tabel. Atunci când conținutul unei celule de tabel nu utilizează tot spațiul disponibil în înălțime, browser-ul va adăuga automat umplutură verticală pentru a alinia conținutul.

Proprietatea poziție

Rețineți că unele proprietăți (de sus și z-index) funcționează numai în cazul în care poziția valorii elementului specificat (nu statică).

Să trecem la afaceri!

Vrei să pună în aplicare CSS Aliniere verticală Center. În primul rând, creați un element cu poziția și dimensiunea relativă. De exemplu: 100% pentru lățime și înălțime.

Al doilea pas poate fi diferit în funcție de browsere vizate, dar una dintre cele două opțiuni pot fi folosite:

• proprietate veche. Trebuie să cunoașteți dimensiunea exactă a ferestrei pentru a elimina jumătate din lățimea și jumătate din înălțimea. A se vedea, de exemplu;
• CSS3 proprietate nou. puteți adăuga proprietatea de transformare, cu o valoare de 50% și traduce blocul va fi întotdeauna în centru. Vezi un eșantion.

Practic, dacă doriți să centrați conținutul, nu utilizați niciodată în partea de sus: 40% sau la stânga: 300px. Acesta funcționează foarte bine pe ecranul de test, dar nu este de centrare.

Amintiți-vă poziția: fix. Puteți face cu ea este la fel ca poziția absolută, dar nu aveți nevoie de poziția relativă a elementului părinte - acesta va fi întotdeauna poziționat în raport cu fereastra browser-ului.

Ai auzit de caietul de sarcini flexbox?

Puteți utiliza flexbox. Este mult mai bine decât orice altă opțiune pe CSS text-align centrul vertical. Cu managementul element de flexbox seamănă cu jocul unui copil. Problema este că trebuie să renunțe la unele browsere, cum ar fi IE9 și versiunea de mai jos. Aici este un exemplu de modul de aliniere pe verticală a unității:

Folosind flexbox locație, mai multe unități pot fi centrate.

Dacă aplicați ceea ce ai învățat din aceste exemple, veți afla unitatea de aliniere CSS pe verticală, cât mai curând posibil.

Referințe și materiale suplimentare

Studierea CSS marcare

Traducerea articolului „CSS vertical Align pentru toată lumea (Dummies Inclus)“ a fost pregătit de o echipă de proiect prietenos Web design de la A la Z.