Dacă l-ați încercat vreodată, acest lucru este dificil, mai ales dacă doriți să evitați utilizarea tabelelor. Din fericire, strigătele noastre de ajutor au fost auzite, iar una dintre noile arme adăugate la arsenalul CSS pentru a aborda acest lucru este un tip de aspect cunoscut sub numele de aspect flexibil al casetei. După cum veți afla în câteva momente, ceea ce vă oferă câteva caracteristici cu adevărat grozave pentru a simplifica machetele complexe. O parte din această funcționalitate grozavă vă permite, de asemenea, să vă centrați conținutul pe verticală și pe orizontală, ceea ce vom acoperi în acest tutorial. Puteți face acest lucru cu umplutură într-o oarecare măsură, dar vă poate împinge aspectul pe ecrane mai mici. Adăugarea unei clase CSS personalizate la foaia de stil înseamnă că puteți centra vertical orice conținut în câteva secunde.
Alinierea orizontală determină modul în care marginile din stânga și din dreapta ale unui paragraf sunt aliniate între marginile din stânga și din dreapta ale casetei de text. Alinierea verticală determină plasarea verticală a caracterului în caseta de text. Lipsa unor modalități bune de a centra vertical elementele în CSS a fost un defect întunecat în reputația sa pentru aproape întreaga sa existență.
Prima metodă cu înălțimea liniei
Prima metodă este simplă și oarecum banală, unde există dezavantaje că va exista o limitare în aplicare. La codificarea paginilor html pentru un site, spațierea dintre rânduri a conținutului textului este probabil unul dintre atributele care de obicei rămâne implicit. În general, trebuie să setăm înălțimea liniei în sine, care vine cu o înălțime similară pentru blocul în care inaltimea liniei proprietate.
Aceasta este prima metodă prezentată în demonstrații
CSS
Constitutesim_first (
chenar: 2px solid # bf1515;
înălțime: 175px;
}
.constutesim_first> p (
înălțimea liniei: 175px;
marja: 0;
text-align: centru;
umplutură: 0;
dimensiunea fontului: 17px;
culoare: # 3152a0;
familie de fonturi: Tahoma;
greutatea fontului: bold;
}
De asemenea, puteți vedea dintr-o privire cum va arăta totul în realitate.
Printr-o metodă similară, este posibil să se implementeze modul de expunere a imaginii, care va fi în centru și cu siguranță pe verticală. Rămâne să înregistrăm o singură proprietate vertical-align: middle; care este responsabil pentru afișarea imaginii.
CSS
A doua variantă (
chenar: 2px roșu continuu;
înălțimea liniei: 158px;
}
A doua variantă div (
text-align: centru;
}
.a doua variantă img (
vertical-align: mijloc;
chenar: 0px solid # 3a3838;
}
Implementăm imagini în centru și în direcția verticală.
Alinierea cu proprietatea poziției
Aceasta este probabil cea mai cunoscută tehnică, dar cea mai comună pentru utilizare cu CSS. Dar aici trebuie adăugat că nici nu este ideală, iar această metodă are și propriile sale mici nuanțe care sunt asociate cu centrul elementului, că dacă este setată ca procent, se va centra pe partea stângă a elementului. partea superioară, în interiorul blogului însuși.
CSS
Opțiune de competiție (
chenar: 2px solid # d40e0e;
înălțime: 162px;
poziție: relativă;
}
.competaird-option div (
poziție: absolută;
sus: 50%;
stânga: 50%;
înălțime: 28%;
latime: 49%;
marja: -2% 0 0 -25%;
chenar: 2px solid # 4a4848;
}
Spațierea dintre linii sau înălțimea liniilor este înălțimea verticală dintre liniile de text dintr-o pagină HTML redată. Aproape întotdeauna, această valoare a distanței este setată la valoarea corespunzătoare de browser sau de redare. Această valoare depinde de obicei de fontul paginii afișate și de alți factori.
Alinierea cu proprietatea tabelului
În această metodă, folosim metoda veche încercată și testată, în care vom reface elementele într-un tabel în care se află celulele. În ceea ce privește eticheta numită table, aceasta nu va fi folosită aici, aici vom seta o proprietate CSS complet diferită, aceasta este display: table ;, display: table-cell ;. Dacă vorbim despre cele mai vechi versiuni de IE, atunci datele de aici pur și simplu nu vor fi afișate. Sper că v-ați actualizat browserul, deoarece devine depășit și aproape totul nu se afișează corect.
variația Cherevert (
chenar: 2px solid # c30b0b;
înălțime: 173px;
afisare: tabel;
latime: 100%;
dimensiunea fontului: 17px;
greutatea fontului: bold;
culoare: # 3945a0;
}
Cherevert-variation div (
afisare: tabel-celula;
vertical-align: mijloc;
text-align: centru;
}
În primul rând, să aruncăm o privire la implicit, care este folosit de majoritatea browserelor. În majoritatea browserelor moderne de zi, spațierea liniilor.
Alinierea cu proprietatea flex
Aici ajungem la o versiune mai originală, care are proprietăți proprii, care rareori pot fi găsite în aspectul unei resurse de internet. Dar totuși sunt aplicate, că în unele cazuri sunt utile. Aceasta setează axa principală, astfel încât definiția direcției flexurilor să se potrivească în containerul de dischetă.
CSS
Varianta-orizontală (
chenar: 2px solid # d20c0c;
înălțime: 147px;
display: flex;
alinierea elementelor: centru;
justificare-conținut: centru;
dimensiunea fontului: 18px;
greutatea fontului: bold;
culoare: # 49518c;
}
Puteți specifica o valoare pentru înălțimea liniei la fel cum ați specifica orice altă dimensiune în css, fie ca număr, dimensiune pixeli, fie ca procent.
Alinierea cu proprietatea transform
Și acum am ajuns la cea mai extremă metodă, dar nu la ultima în ceea ce privește utilizarea ei în web design. Totul este simplu aici, trebuie să deplasați vertical elementul specificat cu valoarea de care aveți nevoie. Proprietate transforma, aceasta este o listă de transformări pe care instalatorul le aplică atunci când instalează pachetul. Instalatorul aplică transformările în ordinea în care sunt specificate în proprietate.
CSS
Vertical-medilpasudsa (
chenar: 2px solid # e00a0a;
înălțime: 158px;
dimensiunea fontului: 19px;
greutatea fontului: bold;
culoare: # 353c71;
}
.vertical-medilpasudsa> div (
poziție: relativă;
sus: 50%;
transforma: translateY (-50%);
text-align: centru;
}
Când furnizați valorile ca număr, acesta se va baza pe dimensiunea actuală a fontului ca bază. Dimensiunea curentă a fontului este înmulțită cu numărul pe care îl specificați pentru a calcula înălțimea liniei sau spațiul dintre linii.
Dacă doriți să centrați caracterele orizontal într-un element, trebuie să utilizați text-align: center. O opțiune, dacă doriți să o centrați vertical și aveți un subsol fix și un rând de text, setați înălțimea liniei să fie aceeași cu înălțimea subsolului.
Dacă trebuie să centrați textul într-un element, cum ar fi un div, un antet sau un paragraf, puteți utiliza proprietatea CSS text-align.
Text-align are câteva proprietăți valide:
Centru: Textura este centrată;
stânga: Se va alinia pe partea stângă a containerului;
dreapta: Aliniat pe partea dreaptă a containerului
justifica: Forțat să se alinieze, atât pe marginea stângă, cât și pe cea dreaptă a containerului, cu excepția liniilor extreme;
justifica-toata: Determină linia extremă să justifice caracterele;
start: La fel ca în stânga, doar dacă direcția merge de la stânga la dreapta. Dar va fi corect dacă setați inițial direcția direcției textului, care se va întâmpla de la dreapta la stânga;
Sfârșit: Opusul începutului;
parinte potrivit: Similar cu moștenirea, cu excepția începutului și a sfârșitului, se calculează relativ la elementul părinte;
Folosiți aceste proprietăți pentru a alinia textul într-un div părinte sau de împachetare. Dacă doriți să centrați textul pe orizontală într-un element, trebuie să utilizați text-align: center.
O opțiune, dacă doriți să o centrați pe verticală, dacă aveți un antet fix și un rând de text, setați înălțimea liniei să fie aceeași cu înălțimea subsolului dvs.
Oricine este implicat în layout, mai devreme sau mai târziu, se confruntă cu nevoia de a alinia elementele pe verticală... și știe ce dificultăți pot apărea la alinierea unui element în centru. CSS are o proprietate `vertical-align` cu mai multe valori care, în mod logic, ar trebui să facă alinierea verticală. În practică, însă, nu funcționează deloc așa cum era de așteptat.
Există mai multe tehnici pentru a rezolva această problemă. Mai jos vom arunca o privire mai atentă asupra fiecăruia dintre ele.
1. Alinierea folosind un tabel
În acest caz, înlocuim blocul exterior cu un tabel cu o singură celulă. Alinierea va fi aplicată conținutului celulei, adică blocului interior.
HTML
CSS
Exterior (lățime: 200 px; înălțime: 200 px; aliniere text: centru; aliniere verticală: mijloc; culoare de fundal: #ffc;)
Principalul dezavantaj al acestei soluții, din punct de vedere al semanticii, este utilizarea tabelului care nu este în scopul propus. Al doilea dezavantaj este că pentru a crea tabelul, trebuie să adăugați un alt element în jurul blocului exterior.
Primul minus poate fi parțial debifat prin înlocuirea etichetelor de tabel cu div și setarea modului de afișare a tabelului în CSS.
HTML
CSS
Înveliș exterior (display: table;) .outer (display: table-cell;)
2. Alinierea cu indentări
Presupunând că cunoaștem înălțimile cutiilor interioare și exterioare, alinierea poate fi setată folosind umplutura verticală a cutiei interioare folosind formula: (H exterior - H interior) / 2.
CSS
Exterior (înălțime: 200px;) .interior (înălțime: 100px; margine: 50px 0;)
Dezavantajul soluției este cunoașterea obligatorie a înălțimii ambelor blocuri.
3. Alinierea cu înălțimea liniei
Dacă blocul interior nu ocupă mai mult de un rând de text, atunci puteți utiliza proprietatea line-height și o puteți seta egală cu înălțimea blocului exterior. Deoarece conținutul blocului interior nu ar trebui să meargă la a doua linie, este recomandabil să adăugați și spațiul alb: nowrap și overflow: reguli ascunse.
CSS
Exterior (înălțime: 200px; înălțime linie: 200px;) .interior (spațiu alb: nowrap; overflow: ascuns;)
Această metodă poate fi folosită și pentru a alinia text cu mai multe linii. Pentru a face acest lucru, blocul interior trebuie să suprascrie valoarea înălțimii liniei și să adauge afișajul: inline-block și vertical-align: reguli de mijloc.
CSS
Exterior (înălțime: 200px; înălțime linie: 200px;) .intern (înălțime linie: normal; afișare: bloc inline; aliniere verticală: mijloc;)
Dezavantajul acestei metode este că trebuie cunoscută înălțimea blocului exterior.
4. Alinierea folosind „stretch”
Această metodă poate fi folosită atunci când înălțimea unității interioare ne este cunoscută, dar cea externă nu.
Pentru a aplica această metodă, avem nevoie de:
- Setați blocul exterior în poziția de poziționare relativă: relativă, iar la cea interioară - poziție absolută: absolută;
- Adăugați mai multe reguli de sus: 0 și de jos: 0 la blocul interior, drept urmare se va întinde pe toată înălțimea blocului exterior;
- Setați căptușeala verticală a blocului interior la automat.
CSS
Exterior (poziție: relativ;) .interior (înălțime: 100px; poziție: absolut; sus: 0; jos: 0; margine: auto 0;)
5. Alinierea cu marginea negativă-sus
Similar cu cea precedentă, această metodă se aplică atunci când înălțimea blocului exterior este necunoscută, dar este cunoscută înălțimea celui interior.
Trebuie să setați poziționarea relativă a blocului exterior, iar cea interioară - absolută. Apoi deplasați blocul interior în jos cu jumătate din înălțimea superioară a blocului exterior: 50% și ridicați-l cu jumătate din înălțimea propriei margini de sus: -H interior / 2 .
CSS
Exterior (poziție: relativ;) .interior (înălțime: 100px; poziție: absolut; sus: 50%; margin-sus: -50px;)
Dezavantajul acestei metode este că trebuie cunoscută înălțimea unității interioare.
6. Alinierea cu transformarea
Metoda poate fi aplicată atunci când înălțimea unității interioare este necunoscută. Trebuie să mutați blocul interior în jos cu jumătate din înălțimea de sus a blocului exterior: 50%, apoi utilizați proprietatea de transformare și mutați-l înapoi în sus folosind funcția translateY (-50%).
CSS
Exterior (poziție: relativ;) .interior (poziție: absolut; vârf: 50%; transform: translateY (-50%);)
7. Alinierea cu pseudo-element
Aceasta este cea mai versatilă metodă care poate fi folosită atunci când înălțimile ambelor blocuri sunt necunoscute.
Esența metodei este să adăugați un bloc în linie cu o înălțime de 100% în interiorul blocului exterior și să îl setați la aliniere verticală. Astfel, înălțimea blocului adăugat va fi egală cu înălțimea blocului exterior. Unitatea interioară va fi aliniată vertical cu cea adăugată și, prin urmare, cu unitatea exterioară.
Pentru a nu rupe semantica, este indicat să adăugați blocul inline folosind pseudoelementele înainte sau după.
CSS
Exterior: înainte (afișare: inline-block; înălțime: 100%; vertical-align: middle; conținut: "";) .inner (afișaj: inline-block; vertical-align: middle;)
Dezavantajul acestei metode este că este imposibil de acceptat cu poziționarea absolută a unității interioare.
8. Aliniați cu Flexbox
Cel mai modern mod de aliniere verticală este utilizarea Flexible Box Layout (sau abreviat Flexbox). Vă permite să controlați în mod flexibil poziționarea elementelor pe pagină, plasându-le aproape oriunde. Alinierea la centru pentru Flexbox este o sarcină foarte simplă.
Problema centrării verticale a elementelor în CSS are o serie de soluții ieșite din cutie. Alegerea metodei de aliniere în fiecare caz depinde de tipul, dimensiunea, poziționarea elementelor și alte proprietăți stabilite de acestea.
Mai jos sunt tehnicile de aliniere verticală populare printre designerii de layout. Arată cum funcționează și pentru ce cazuri fiecare este cel mai potrivit.
Iată două div-uri:
Fiecare dintre metode va fi aplicată pentru a alinia unitatea interioară la centrul unității exterioare.
înălțimea liniei pentru o linie
Când părintele se întinde pe un rând de text și se cunoaște înălțimea copilului, proprietatea line-height poate fi aplicată. Valoarea proprietății trebuie să fie egală cu înălțimea blocului exterior. Acest lucru funcționează doar pentru o singură linie, așa că este util pentru posteritate să adauge overflow: ascuns și interzice împachetarea liniei white-space: nowrap.
Nu veți putea folosi procentajul de înălțime de linie = 100%, deoarece 100% în acest caz este înălțimea fontului.
Container (
înălțime: 300px;
înălțimea liniei: 300px;
}
interior (
spatiu alb: nowrap;
preaplin: ascuns;
}
Metoda este aplicabilă numai atunci când se cunoaște înălțimea unității exterioare.
Tabel cu aliniere verticală
Pentru alinierea verticală a elementelor, o masă este cea mai potrivită. Pentru a nu rupe semantica, este mai bine să creați elemente de tabel folosind CSS. Poziția conținutului celulei este controlată de vertical-align. Există patru valori ale acestei proprietăți care funcționează în tabele:
Linie de bază - implicit;
... jos - conținut în partea de jos a celulei;
... mijloc - conținut în mijlocul celulei;
... top este conținutul din partea de sus a celulei.
În primul exemplu, o celulă de tabel singură devine blocul exterior.
Container (
afisare: tabel-celula;
vertical-align: mijloc;
}
Metoda este bună deoarece funcționează pentru elemente fără o înălțime specificată, dar în unele cazuri utilizarea sa este îngreunată de faptul că blocul exterior, ca orice celulă de tabel, se ajustează în lățime la conținutul său și poate fi întins doar prin specificarea lățimea pentru lățime în mod explicit. Pentru o celulă fără tabel, procentele nu funcționează bine.
Acest defect este corectat prin împachetarea celulei într-un părinte cu o proprietate display: table. Acest element poate fi dimensionat ca procent. Codul final va arăta astfel:
Înveliș exterior (
afisare: tabel;
}
Container (
afisare: tabel-celula;
vertical-align: mijloc;
}
Poziție: absolută + marjă negativă
Metoda este utilizată atunci când se cunoaște înălțimea elementului interior. Este posibil să nu fie cunoscut de unitatea externă. Părintelui i se oferă o poziție relativă, iar copilul în interiorul acesteia este absolut.
O valoare a proprietății superioare de 50% forțează elementul imbricat să fie centrat sus în caseta exterioară. Tot ce rămâne este să-l ridicați cu o margine negativă în jumătatea de sus a propriei sale înălțimi, astfel încât să fie exact centrat vertical.
Container (
poziție: relativă;
}
interior (
inaltime: 140px;
poziție: absolută;
sus: 50%;
margin-top: -70px;
}
Dezavantajul acestei metode este că trebuie să cunoașteți înălțimea copilului.
Aliniați în linie cu alinierea verticală
Alinierea elementelor inline și inline-block, inclusiv imagini și pictograme, în textul înconjurător se face cu proprietatea vertical-align. Spre deosebire de un tabel, în acest caz funcționează întregul set de valori specificate în caietul de sarcini.
Dacă înălțimea părintelui este cunoscută, această proprietate poate fi folosită pentru a centra textul cu mai multe linii.
Pentru blocul exterior, este prescrisă centrarea unei linii.
Container (
inaltime: 140px;
înălțimea liniei: 140px;
}
Valoarea înălțimii liniei pentru unitatea interioară este suprascrisă la normal sau orice cantitate este necesară. De asemenea, i se oferă vertical-align: aliniere la mijloc și conversie la tipul inline-block - afișare: inline-block.
interior (
display: inline-block;
înălțimea liniei: normală;
vertical-align: mijloc;
}
Dezavantajul acestei metode este că trebuie să cunoașteți înălțimea părintelui.
Alinierea cu transformarea
Funcția translateY a proprietății transform vă permite să centrați un bloc interior cu o înălțime necunoscută. Pentru a face acest lucru, părintele trebuie poziționat relativ, iar copilul absolut.
Proprietatea de sus cu o valoare de 50% coboară caseta interioară, astfel încât marginea sa superioară să fie în mijlocul părintei. Valoarea TranslateY: -50%, ridică elementul la jumătate din înălțimea proprie și astfel aliniază centrele verticale ale casetelor.
Container (
poziție: relativă;
}
interior (
poziție: absolută;
sus: 50%;
transforma: translateY (-50%);
}
Dezavantajul suportului limitat al IE pentru funcțiile de transformare.
Aliniați prin pseudo-element
Metoda funcționează atunci când înălțimea nu este cunoscută nici pentru primul, nici pentru al doilea bloc. Pseudo-elementul inline-block este adăugat în interiorul părinte folosind fie înainte, fie după. Înălțimea elementului adăugat trebuie să fie egală cu înălțimea părintelui - înălțime: 100%. Alinierea verticală a conținutului este specificată folosind vertical-align: middle.
Cu vertical-align: middle, caseta interioară este aliniată în raport cu acest pseudo-element. Deoarece părintele și copilul au aceeași înălțime, elementul interior, atunci când este aliniat vertical cu pseudo-elementul, este centrat și cu caseta exterioară.
Container: înainte (
continut: "";
inaltime: 100%;
vertical-align: mijloc;
display: inline-block;
}
interior (
display: inline-block;
vertical-align: mijloc;
}
Un mod universal. Nu funcționează dacă este specificată poziționarea absolută pentru unitatea interioară.
Flexbox
Cel mai nou și mai ușor mod de a alinia vertical elemente. Flexbox vă permite să aranjați elementele unei pagini Web în orice mod doriți. Pentru a alinia blocul în centru, este suficient să scrieți display: flex către părinte și margine: auto către copil.
Container (
display: flex;
latime: 320px;
inaltime: 140px;
}
interior (
lățime: 120px;
margine: auto;
}
Flexbox funcționează numai în browserele moderne.
Alegerea metodei
Ce tehnică de aliniere verticală să utilizați depinde de sarcină și de acele limitări care pot fi prezente în fiecare caz particular.
Înălțimea elementului necunoscută
În această situație, puteți utiliza una dintre cele patru metode universale:
1. Tabelul. Părintele este o celulă de tabel creată în HTML sau prin display-table / display-cell. Acest element părinte este atribuit vertical-align: middle.
2. Pseudo-element. Pentru caseta exterioară, este creat un pseudo-element în bloc cu lățime = 100% și aliniere verticală: mijloc. Descendentului i se atribuie afișarea: inline-block și vertical-align: middle. Metoda nu funcționează numai atunci când este specificată poziționarea absolută pentru unitatea interioară.
3. Transformă. Părintele capătă poziție: rudă. Copilului i se atribuie poziția: absolut, top: 50% și transform: translateY (-50%);
4. Flexbox. Blocul exterior este setat să afișeze: flex, iar blocul interior este setat la margine: auto.
Se cunoaște doar înălțimea descendentului
Blocul exterior este pozitionat relativ; elementului interior i se atribuie poziționare absolută, de sus: 50% și o marjă de sus egală cu jumătate din înălțimea sa.
O linie într-un bloc cu înălțime cunoscută
Caseta exterioară este setată la o proprietate line-height cu o valoare egală cu înălțimea sa.
Înălțimea blocului exterior este cunoscută, dar înălțimea elementului interior nu este.
Părintele primește o înălțime de linie egală cu înălțimea sa. În descendent, valoarea înălțimii liniei este suprascrisă la normal sau la orice valoare dorită, iar afișarea: inline-block și vertical-align: middle sunt setate la aceasta.
Articolul de astăzi își propune să vă arate cum să centrați un div, atât pe orizontală, cât și pe verticală, cu câteva trucuri CSS. De asemenea, vă vom arăta cum să centrați întreaga pagină sau într-un singur element div.
Centrare ușoară a unui DIV pe pagină
Această metodă va funcționa excelent în toate browserele.
CSS
Center-div (marja: 0 automat; lățime: 100px;)
Exemplu
Valoarea automată din proprietatea marginii setează umplutura din stânga și din dreapta la orice spațiu disponibil pe pagină. Lucrul important de reținut aici este că div-ul centrat trebuie setat la lățime.
Centrați DIV în interiorul DIV în modul vechi
Această metodă de aliniere a centrului div va funcționa în toate browserele.
CSS
Div-exterior (padding: 30px;) .inner-div (marja: 0 automat; lățime: 100px;)
HTML
Exemplu
Div-ul exterior poate fi poziționat cum doriți, dar div-ul interior trebuie să aibă o lățime ( lăţime).
Centrarea unui DIV într-un element DIV folosind inline-block
În această metodă de centrare a unui div în cadrul unui div, nu este necesar să specificați lățimea elementului interior. Va funcționa în toate browserele moderne, inclusiv IE8.
CSS
Outer-div (padding: 30px; text-align: center;) .inner-div (afișare: inline-block; padding: 50px;)
HTML
Exemplu
Proprietatea text-align funcționează numai pe elementele inline. Valoarea inline-block permite ca div-ul interior să fie afișat ca element inline, precum și ca bloc ( inline-block). Proprietatea text-align pe div-ul exterior ne va permite să centrem div-ul interior.
Centrați DIV în interiorul elementului DIV orizontal și vertical
Aici, margin: auto este folosit pentru a centra div-ul în centrul paginii. Exemplul va funcționa în toate browserele moderne.
CSS
Outer-div (padding: 30px;) .inner-div (marja: automată; lățime: 100px; înălțime: 100px;)
HTML
Exemplu
Div-ul interior trebuie să aibă o lățime ( lăţime) și înălțimea ( înălţime). Metoda va eșua dacă div-ul exterior are o înălțime fixă.
Centrați DIV în partea de jos a paginii
Aici folosim margine: poziționare automată și absolută pentru elementul exterior pentru a poziționa div-ul centrat vertical. Metoda va funcționa în toate browserele moderne.
CSS
Outer-div (poziție: absolut; jos: 30px; lățime: 100%;) .inner-div (marja: 0 auto; lățime: 100px; înălțime: 100px; culoare de fundal: #ccc;)
HTML
Exemplu
Div-ul interior trebuie să aibă o lățime setată. Spațiul din partea de jos a paginii este ajustat cu proprietatea de jos a div-ului exterior. De asemenea, puteți centra div-ul în partea de sus a paginii, înlocuind proprietatea de jos cu proprietatea de sus.
Centrați DIV vertical și orizontal pe pagină
Aici, pentru a alinia div-ul la centru, folosește din nou margin: auto și poziționarea absolută a div-ului exterior. Metoda va funcționa în toate browserele moderne.
CSS
Center-div (poziție: absolută; margine: automată; sus: 0; dreapta: 0; jos: 0; stânga: 0; lățime: 100px; înălțime: 100px;)
Exemplu
Elementul div trebuie să aibă un set de lățime ( lăţime) și înălțimea ( înălţime).
Centrarea receptivă a elementului DIV pe pagină
Aici, pentru a centra alinierea div-ului cu CSS, facem ca lățimea div-ului să răspundă, astfel încât să răspundă la modificările ferestrei. Această metodă funcționează în toate browserele.
CSS
Center-div (marja: 0 automat; lățime maximă: 700px;)
Exemplu
Div-ul centrat trebuie să aibă setată proprietatea max-width.
Centrați DIV în interiorul elementului folosind proprietățile blocului interior
Div-ul interior este receptiv aici. Această metodă de centrare a div-urilor în interiorul div-urilor va funcționa în toate browserele.
CSS
Div-exterior (padding: 30px;) .inner-div (marja: 0 automat; lățime maximă: 700px;)
HTML
Exemplu
Div-ul interior trebuie să aibă setată proprietatea max-width.
Centrați două div-uri receptive unul lângă celălalt
Aici avem două div-uri receptive una lângă alta. Această metodă de setare a div-ului în centrul ecranului va funcționa în toate browserele moderne.
CSS
Container (text-align: center;) .left-div (display: inline-block; max-width: 300px; vertical-align: top;) .right-div (display: inline-block; max-width: 150px; ) ecran și (lățimea maximă: 600 px) (.left-div, .right-div (lățime maximă stânga: 100%;))
HTML
Exemplu
Aici avem mai multe elemente de bloc inline în interiorul unui container centrat. Acest exemplu folosește și interogări media CSS; adică, dacă dimensiunea ecranului este mai mică de 600 de pixeli, atunci proprietatea max-width pentru ambele div stânga și dreapta este setată la 100%.
Element DIV centrat cu Flexbox
Aici centrem div-ul CSS cu Flexbox. Este destinat să faciliteze procesul de proiectare a interfeței cu utilizatorul. Acest plug-in este acceptat de Chrome 38+, IE11, Microsoft Edge, Firefox 38+, Safari 9+, Opera 30+, iOS Safari 9+ și Android Browser 40+.
CSS
Container (afișare: flex; align-items: center; justify-content: center; înălțime: 100vh;) .item (culoarea fundal: # f3f2ef; bordura-radius: 3px; lățime: 200px; înălțime: 100px;)
Astăzi, dragă cititor, ne vom ocupa de problema alinierii verticale într-un bloc. div.
Cel mai probabil știți deja despre minunata proprietate CSS vertical-align.Și Dumnezeu însuși ne-a spus să folosim această proprietate pentru alinierea verticală (nu degeaba are un nume atât de explicit).
Formularea problemei: Este necesar să centrați conținutul blocului de înălțime variabilă față de verticală.
Acum să trecem la rezolvarea problemei.
Și așa, avem un bloc, înălțimea lui se poate schimba:
Primul lucru care vă vine în minte este să faceți următorul truc:
Există toate motivele să credem că fraza Blocați conținutul se va alinia la centrul înălțimii containerului div.
Dar nu era acolo! Nu vom obține nicio aliniere centrală așteptată în acest fel. Și de ce? S-ar părea că totul este indicat corect. Se pare că aceasta este captura: proprietatea vertical-align poate fi folosit doar pentru a alinia conținutul celulelor tabelului sau pentru a alinia elemente în linie unul față de celălalt.
În ceea ce privește alinierea în celula tabelului, cred că totul este clar. Voi explica un alt caz cu elemente inline.
Alinierea verticală a elementelor inline
Să presupunem că aveți un șir de text care este împărțit cu etichete inline în părți:
Tu salută bucată text!
O etichetă inline este înțeleasă ca un container, al cărui aspect nu duce la împachetarea conținutului la o nouă linie.
Acțiunea etichetei bloc duce la împachetarea conținutului containerului pe o nouă linie.
Este o etichetă de bloc. Dacă închidem bucăți de text în blocuri, apoi fiecare dintre ele va apărea pe o nouă linie. Folosind eticheta care, spre deosebire de, este litere mici, nu va exista ambalare a containerelor la o linie nouă, toate containerele rămâne pe o singură linie.Container Este convenabil de utilizat atunci când specificați o parte a textului cu formatare specială (evidențierea cu culoare, un font diferit etc.)
Pentru containere aplicați următoarele proprietăți CSS:
#perviy (alinierea verticală: sub;) #vtoroy (alinierea verticală: 3px;) #tretiy (alinierea verticală: -3px;)
Ca rezultat, linia de text va arăta astfel:
Aceasta nu este altceva decât alinierea verticală a elementelor inline și proprietatea CSS vertical-align face față perfect acestei sarcini.
Ne abatem puțin, acum ne întoarcem la sarcina noastră principală.
Aliniere verticală într-un container div
Indiferent, vom folosi proprietatea pentru a ne alinia în interiorul containerului div. vertical-align... După cum am spus deja, această proprietate poate fi folosită în cazul alinierii elementelor inline (am discutat acest caz în detaliu mai sus și nu ne convine pentru alinierea într-un container div); rămâne doar să folosim faptul că vertical-align funcționează pentru celulele de tabel.
Cum putem folosi asta? Nu avem masă, lucrăm cu un container div.
Ha, se dovedește a fi foarte simplu.
proprietate CSS afişa ne permite să transformăm blocul nostru div într-o celulă de tabel, se poate face ușor și natural:
Să avem un div de clasă aliniere text:
Blocați conținutulPentru acest bloc, specificați următoarea proprietate CSS:
Textalign (afișare: table-cell;)
Această instrucțiune CSS va transforma în mod miraculos div-ul nostru într-o celulă de tabel, fără a o altera vizual în vreun fel. Și pentru o celulă de tabel, putem aplica proprietatea vertical-align alinierea verticală dorită va funcționa pe deplin.
Totuși, totul nu se poate termina atât de simplu. Avem un browser IE minunat. Nu știe să lucreze cu proprietatea afișare: tabel-celulă(Sugerez să vă familiarizați cu tabelul care ilustrează performanța acestei proprietăți CSS în diferite browsere de pe site-ul web htmlbook.ru). Prin urmare, va trebui să mergem la diverse trucuri.
Există multe modalități de a realiza alinierea într-un container div pentru toate browserele:
- Metodă folosind un cotneyer auxiliar suplimentar
- Metoda folosind expresia. Este asociat cu un calcul inteligent al înălțimii blocurilor. Cunoașterea JavaScript este indispensabilă aici.
- Folosind proprietatea line-height. Această metodă este potrivită numai pentru alinierea verticală într-un bloc de înălțime cunoscută, ceea ce înseamnă că, în general, nu este aplicabilă.
- Utilizarea decalajului de conținut absolut și relativ în cazul browserului IE. Aceasta metoda mi se pare cea mai clara si simpla. De asemenea, este implementabil pentru un container cu înălțime variabilă div. Ne vom opri asupra ei mai detaliat.
După cum înțelegeți, rămâne să rezolvăm problema alinierii verticale în IE, asociată cu înțelegerea greșită a proprietății. afișare: tabel-celulă(nici IE6, nici IE7, nici IE8 nu sunt familiarizați cu această proprietate). Prin urmare, folosind comentariu condiționat special pentru browserele din familia IE, vom specifica alte proprietăți CSS.
Comentariu condiționat
Design tip:
... Инструкции, действующие только в случае выполнения условия в квадратных скобках...
se numește comentariu condiționat (ai grijă, forma unui comentariu condiționat trebuie să se potrivească pe deplin cu exemplul dat, până la un spațiu).
Instrucțiunile conținute într-un astfel de comentariu condiționat vor fi executate doar dacă browserul care interpretează acest cod aparține familiei IE.
Astfel, folosind un comentariu condiționat, putem ascunde o bucată de cod din toate browserele, cu excepția IE.
Rezolvarea problemei
Din cauza acestui pătrunjel, va trebui să ne alimentem HTML cu două containere suplimentare. Iată cum va arăta blocul nostru de text:
Acesta este un fel de text de verificare.
Este format din două linii.Pentru clasa container div aliniere text setează proprietăți CSS care își aliniază conținutul vertical pentru toate browserele normale (cu excepția IE, desigur):
Display: tabel-celula; vertical-align: mijloc;
Și încă două proprietăți care stabilesc lățimea și înălțimea blocului:
Latime: 500px; înălțime: 500px;
Acest lucru este suficient pentru a alinia conținutul containerului în centru față de verticală, în toate browserele. cu excepția IE.
Acum începem să adăugăm proprietăți legate de aliniere. pentru browsere din familia IE(pentru ei am folosit blocuri suplimentare divși span):
Referitor la etichetă divîn interiorul unui bloc de clasă aliniere text... Pentru a face acest lucru, trebuie mai întâi să specificați numele clasei și apoi, separate printr-un spațiu, eticheta la care ne referim.
Textalign div (poziție: absolut; sus: 50%;)
O astfel de construcție înseamnă: pentru toate etichetele div din interiorul unui bloc cu clasa aliniere text aplicați proprietățile enumerate.
În consecință, stilurile specificate pentru bloc aliniere text sunt modificate:
Textalign (afișare: tabel-celulă; vertical-align: mijloc; lățime: 500px; înălțime: 500px; poziție: relativă;)
Punctul din stânga sus al casetei de text este acum compensat în jos cu 50%.
Pentru a clarifica ce se întâmplă, am desenat o ilustrație:
După cum puteți vedea din imagine, am făcut unele progrese. Dar asta nu este tot! Punctul din stânga sus al casetei galbene s-a mutat într-adevăr cu 50% în jos față de caseta părinte (violet). Dar avem nevoie de ceva la cincizeci la sută din înălțimea blocului violet centrul blocului galben, nu punctul său din stânga sus.
Acum eticheta va fi folosită spanși poziționarea sa relativă:
Textalign span (poziție: relativă; sus: -50%;)
Astfel, am deplasat blocul galben în sus cu 50% din înălțimea lui, raportat la poziția de pornire. După cum vă puteți imagina, înălțimea casetei galbene este egală cu înălțimea conținutului centrat. Iar ultima operațiune cu containerul span ne-a poziționat conținutul în mijlocul blocului violet. Ura!
Un mic șaman
În primul rând, trebuie să ascundem pătrunjelul din toate browserele normale și să-l deschidem pentru IE. Acest lucru se poate face, desigur, cu ajutorul unui comentariu condiționat, nu degeaba ne-am familiarizat cu el:
Există o mică problemă. Dacă conținutul centrat este prea mare, atunci duce la consecințe neplăcute: apare înălțimea de defilare verticală suplimentară.
Soluţie: trebuie să adăugați proprietate debordare: ascuns bloc aliniere text.
Cunoașteți proprietatea în detaliu revărsare poate fi în.
Aspectul final al instrucțiunilor de bloc CSS aliniere text se pare ca:
Textalign (afișare: table-cell; vertical-align: middle; lățime: 500px; înălțime: 500px; poziție: relativă; overflow: ascuns; chenar: 1px negru;)
Îmi pare rău, am uitat să menționez un punct important. Daca incerci setați înălțimea blocului de clasă aliniere text ca procent atunci ai nu va ieși nimic din asta.
Centrare în bloc de înălțime variabilă
De foarte multe ori este necesar să setați înălțimea unui bloc de clasă. aliniere text nu în pixeli, ci ca procent din înălțimea blocului părinte și aliniați conținutul containerului div în mijloc.
Problema este că este imposibil să faci acest lucru pentru o celulă de tabel (și până la urmă, blocul de clasă aliniere text se transformă într-o celulă de masă, datorită proprietății afișare: tabel-celulă).
În acest caz, trebuie să utilizați un bloc extern pentru care este specificată proprietatea CSS afisare: tabelși deja pentru ca acesta să stabilească valoarea procentuală a înălțimii. Apoi blocul s-a imbricat în el, cu directiva CSS afișare: tabel-celulă, va moșteni cu plăcere înălțimea blocului părinte.
Pentru a implementa un bloc cu înălțime variabilă în exemplul nostru, vom modifica ușor CSS-ul:
Clasă aliniere text vom modifica valoarea proprietatii afişa cu tabel-celula pe masași eliminați directiva de aliniere vertical-align: mijloc... Acum putem schimba în siguranță valoarea înălțimii de la 500 de pixeli la, de exemplu, 100%.
Astfel, proprietățile CSS pentru blocul de clasă aliniere text va arata asa:
Textalign (afișare: tabel; lățime: 500px; înălțime: 100%; poziție: relativă; overflow: ascuns; chenar: 1px negru solid;)
Rămâne să implementăm centrarea conținutului. Pentru a face acest lucru, un container div imbricat într-un bloc de clasă aliniere text(acesta este același bloc galben din imagine), trebuie să setați proprietatea CSS afișare: tabel-celulă apoi va moșteni 100% înălțime din blocul părinte aliniere text(bloc violet). Și nimic nu ne împiedică să aliniem conținutul containerului div imbricat în centru cu proprietatea vertical-align: mijloc.
Obținem o altă listă suplimentară de proprietăți CSS pentru div imbricat în container aliniere text.
Textalign div (afișare: table-cell; vertical-align: middle;)
Acesta este tot trucul. Opțional, puteți varia înălțimea cu conținut centrat.
Pentru mai multe informații despre alinierea verticală a unui bloc de înălțime variabilă, consultați.
Top articole similare
