Vertically centru elementul folosind css
Designerii, uneori, se pune întrebarea: cum să se alinieze elementele pe verticală. Și acest lucru cauzează unele probleme. Cu toate acestea, există mai multe metode pentru centrarea elementelor verticale, și fiecare dintre aceste metode este destul de simplu. Acest articol descrie unele dintre aceste metode.
Pentru a vedea fiecare metodă în acțiune, faceți clic pe butonul demo sau a imaginii.
Să discutăm unele dintre problemele care împiedică centrarea pe verticală.
Vertical Alinierii
membru de aliniere orizontală este suficientă pentru a pune în aplicare cu ușurință (folosind CSS). Element încorporat (inline) pot fi centrate pe orizontală atribuindu container părinte text se aliniază cu valoarea centrală a proprietății. Atunci când elementul de bloc, pentru centrarea este suficient pentru a seta lățimea (lățime) și setați valorile dreptului (marja-dreapta) și câmpul din stânga (-margine din stânga) pe auto.
Comparativ cu textul: Multe de centrare începe să utilizeze proprietatea vertical-align. Acest lucru este logic, și prima mea alegere ar fi la fel. Pentru a centra elementul din tabel poate fi utilizat atributul valign.
valign Cu toate acestea atribut funcționează numai în ceea ce privește celula (de exemplu,
- Textul este centrat pe linia de înălțime (spațiere).
- Cu referire la masa, daca nu intra in detalii, centrarea are loc în ceea ce privește înălțimea rândului.
Din păcate, proprietatea vertical-align nu pot fi aplicate la elementele blocului, de exemplu, cum ar fi para (p) in interiorul div-tag.
Cu toate acestea, există și alte metode de elemente de centrare pe verticală, și puteți utiliza în continuare proprietatea vertical-align, acolo unde este necesar. Ce metodă de utilizarea depinde de ceea ce aveți de gând să fie centrat.
spațierea sau linie de înălțime
Această metodă trebuie folosită numai atunci când doriți să centru o linie de text. Pentru a face acest lucru, elementul care conține textul, setați linia de înălțime (spațiere) este mai mare decât dimensiunea fontului.
Implicit este format egal cu spațiul de deasupra și dedesubtul textului astfel încât textul este centrat vertical.
În acest caz, înălțimea elementului părinte este opțională.
Această metodă funcționează în toate browserele, dar nu uitați că ar trebui să fie utilizate pentru linii de text. Dacă textul durează mai mult de o linie, folosiți o metodă diferită. Valoarea liniei de înălțime poate fi orice, dar nu mai mică decât înălțimea fontului. În practică, această metodă este excelentă pentru alinierea orizontală a meniului.
Metoda CSS folosind tabele proprietăți
Așa cum am scris, conținutul celulei poate fi centrat prin intermediul proprietăților CSS vertical-align. Elementul de bază trebuie să fie reprezentat ca un tabel, ca elementul copil notat cu celule și se aplică vertical-align proprietate set mijloc. Astfel, orice element descendent conținut va fi centrat vertical. cod css prezentat mai jos.
poziționare absolută și câmp negativ
Această metodă este proiectat pentru elemente de nivel bloc și funcționează în toate browserele. Este necesar să se stabilească înălțimea elementului care urmează să fie centrat.
Următorul cod în cazul în care elementul copil este centrat prin intermediul acestei metode.
În primul rând, trebuie să poziționați mamă și elementul copil. Apoi vom da compensate element de copil cu 50% în raport cu partea de sus (de sus) și din partea stângă (stânga) a elementului mamă, astfel am elementul central copilului în raport cu societatea-mamă. Cu toate acestea, manipulări noastre vor pune în colțul din dreapta sus al elementului de copil la centrul elementului mamă, pe care noi, desigur, nu este îndeplinită.
Scopul nostru este de a muta elementul copil în sus și spre stânga, în raport cu elementul de bază astfel încât să vizual elementul copil este centrat atât pe verticală, cât și pe orizontală. De aceea, vrei să știi înălțimea și lățimea copilului.
Deci, ar trebui să ne cerem elementul copil negativ margine superioară și stânga egală cu jumătate, respectiv, lățimea și înălțimea copilului.
Spre deosebire de primele două metode, metoda de elemente de nivel bloc. Metoda funcționează în toate browserele, dar conținutul poate depăși înălțimea elementului părinte, și du-te dincolo de ea. Această metodă funcționează cel mai bine atunci când înălțimea și lățimea elementelor fixe.
Element copil de poziționare absolută
Ca și în metoda anterioară, părintele și elementul copil sunt poziționate, respectiv, relativă și absolută.
Codul CSS I Centering element de copil atât pe verticală cât și pe orizontală, dar puteți utiliza centrat numai pe verticală.
Ideea acestei metode este faptul că este posibil să se poziționeze elementul copil din proprietățile valoare de top. la stânga. dreapta. fund egal cu 0. Deoarece elementul nostru copil al elementului părinte este mai mic, nu va fi capabil să „stick“ la elementul părinte.
Valori de câmp pentru toate cele patru laturi ale elementului copil este egal cu zero, datorită acestui element este centrat pe verticală în raport cu părintele. Din păcate, această metodă are aceleași dezavantaje ca metoda anterioară: este necesar să se stabilească înălțimea și lățimea unui descendent, lipsa de suport pentru browsere mai vechi IE.
Marginile inferioare și superioare sunt
In aceasta metoda se atribuie în mod clar elementul părinte indentare egal (inferior și superior), datorită acestui element de copil este centrat vizual vertical.
Eu folosesc dimensiuni relative. Dacă mărimea blocului este fix, acesta va trebui să facă unele calcule matematice.
De exemplu, în cazul în care elementul mamă are o înălțime de 400 de pixeli, iar 100px copil, este necesar să se stabilească o parte superioară și o adâncitură mai mică pe 150px.
+ 150 + 150 100 = 400
div plutitoare
Această metodă a implicat plutitor (float) bloc gol, care controlează poziția verticală a unui element de copil. Flotația div trebuie să fie pus în fața elementul copil, a se vedea codul HTML de mai jos.
În primul rând, vom schimba unitatea plutitoare la stânga (sau dreapta) și alocați o înălțime de 50% a elementului mamă. Astfel, unitatea plutitoare va umple jumătatea superioară a elementului mamă.
Deoarece blocul plutitor, acesta este îndepărtat din fluxul general al documentului, prin urmare, o unitate de filială pentru a atribui proprietăți clar stabilite atât. Am stabilit valoarea ambelor. Cu toate acestea, puteți utiliza valoarea pe care coincide cu poziția elementului flotant.
Acum, marginea superioară a elementului copil se află direct sub marginea inferioară a elementului flotant. Avem nevoie de a ridica elementul copil la jumătate din înălțimea elementului flotant. Pentru acest set suficient de negativ pentru unitatea de marginea inferioară plutitoare de 50%.
Acesta funcționează în toate browserele. Dezavantajul este că ar trebui să existe un bloc gol și doriți să cunoașteți înălțimea unui element de copil.