De la autor: Vă urez bun venit din nou pe paginile blogului nostru. În articolul de astăzi, aș dori să vorbesc despre diverse tehnici de aliniere care pot fi aplicate atât la blocuri, cât și la conținutul acestora. Mai exact cum să aliniați blocurile în css, precum și alinierea textului.
Alinierea blocurilor la centru
În css, alinierea unui bloc la centru este ușoară. Aceasta este cea mai cunoscută tehnică pentru mulți, dar aș vrea să vă povestesc despre ea chiar acum, în primul rând. Se presupune că este centrat orizontal în raport cu elementul părinte. Cum se face? Să presupunem că avem un container și subiectul nostru de testare este în el:
< div id = "wrapper" > < div id = "header" > < / div > < / div > |
Să presupunem că acesta este antetul site-ului. Nu se extinde pe toată lățimea ferestrei și trebuie să o centram. Scriem astfel:
#antet ( latime / max - latime: 800px; marja: 0 auto; |
Trebuie să specificăm lățimea exactă sau maximă și apoi să scriem proprietatea cheii - margine: 0 auto. Setează marjele pentru antetul nostru, prima valoare este marginile de sus și de jos, iar a doua este marginile din dreapta și din stânga. Valoarea automată îi spune browserului să calculeze automat umplutura pe ambele părți, astfel încât elementul să fie exact în centrul părintelui său. Confortabil!
Alinierea textului
Acesta este, de asemenea, un truc foarte simplu. Pentru a alinia toate elementele inline, puteți utiliza proprietatea text-align și valorile acesteia: stânga, dreapta, centru. Acesta din urmă centrează textul, care este ceea ce avem nevoie. Chiar și o imagine poate fi aliniată în același mod, deoarece este, de asemenea, un element inline în mod implicit.
Aliniați textul pe verticală
Dar acest lucru este mai complicat. În mod implicit, nu există nicio proprietate simplă, binecunoscută, care să centreze cu ușurință textul într-un container bloc pe verticală. Cu toate acestea, există mai multe tehnici cu care designerii de layout au venit de-a lungul anilor.
Setați înălțimea blocului folosind căptușeală. Modul nu este să setați o înălțime explicită folosind înălțimea, ci să o creați artificial folosind căptușeli în partea de sus și de jos, care ar trebui să fie aceleași. Să creăm orice bloc și să îi scriem următoarele proprietăți:
div (fond: #ccc; umplutură: 30px 0;)
div ( fundal: #ccc; umplutură: 30px 0; |
Fundalul este doar pentru a vedea vizual marginile, precum și umplutura. Acum, înălțimea blocului este alcătuită din aceste două liniuțe și linia în sine și totul arată astfel:
Definiți înălțimea liniei pentru bloc. Mi se pare că acesta este cel mai corect mod dacă trebuie să aliniați o linie de text. Cu acesta, puteți scrie înălțimea într-un mod normal folosind proprietatea înălțime. După aceea, trebuie să seteze înălțimea liniei la fel ca înălțimea blocului în ansamblu.
div (înălțime: 60px; înălțime linie: 60px;)
div ( înălțime: 60px; linie - înălțime: 60px; |
Rezultatul va fi similar cu imaginea de mai sus. Totul va funcționa chiar dacă adăugați umplutură. Cu toate acestea, doar pentru o linie. Dacă aveți nevoie de mai mult text într-un element, această metodă nu va funcționa.
Convertiți bloc în celulă de tabel. Esența acestei metode este că proprietatea vertical-align: middle acționează asupra celulei tabelului, care centrează elementul vertical. În consecință, în acest caz, blocul trebuie setat după cum urmează:
div (afișare: table-cell; vertical-align: middle;)
div ( afișare: tabel - celulă; verticală - aliniere: mijloc; |
Lucrul bun despre această metodă este că puteți alinia în centru cât de mult text doriți. Dar pentru blocul în care este imbricat div-ul nostru este mai bine să înregistrați display: table, altfel s-ar putea să nu funcționeze.
Ei bine, aici ajungem la ultima tehnică pentru astăzi - alinierea blocurilor în sine pe verticală. Trebuie spus că, din nou, nu există nicio proprietate aici care să fie destinată special pentru aceasta, dar există câteva trucuri de care ar trebui să fii conștient.
Setați indentări în procente. Dacă cunoașteți înălțimea elementului părinte și puneți un alt element bloc în el, atunci îl puteți centra folosind umplutura procentuală. De exemplu, părintele are 600 px înălțime. Puneți un bloc în el care are 300 px înălțime. Cât de mult de sus și de jos aveți nevoie să faceți un pas înapoi pentru a-l centra? 150 de pixeli fiecare, ceea ce reprezintă 25% din înălțimea părintelui.
Această metodă permite centrarea să se facă numai atunci când dimensiunile permit calcule. Și dacă părintele tău are 887 de pixeli înălțime, atunci nu vei putea scrie nimic sigur, acest lucru este de înțeles.
Inserați un element într-o celulă de tabel. Din nou, dacă transformăm elementul părinte într-o celulă de tabel, atunci blocul inserat în acesta va fi centrat automat pe verticală. Pentru a face acest lucru, părintele trebuie doar să seteze vertical-align: middle.
Și dacă, pe lângă aceasta, mai scriem margine: 0 auto, atunci elementul va fi în centru și pe orizontală!
Foarte des în aspect este necesară centrarea unui element orizontal și/sau vertical. Prin urmare, am decis să fac un articol cu diverse metode de centrare, astfel încât totul să fie la îndemână într-un singur loc.
Aliniere orizontala
margine: auto
Alinierea orizontală cu margine este utilizată atunci când lățimea elementului centrat este cunoscută. Lucrări pentru elemente de bloc:
Element (margine-stânga: automat; margine-dreapta: automat; lățime: 50%;)
Specificarea valorii automate pentru umplutura din dreapta și din stânga le face egale, ceea ce centrează elementul orizontal în blocul părinte.
text-align: centru
Această metodă este potrivită pentru alinierea la centru a textului într-un bloc. text-align: center:
Sunt aliniat la centru
poziție și marja negativă la stânga
Potrivit pentru blocuri centrate de lățime cunoscută. Oferim poziția blocului părinte: relativ la poziția relativă la acesta, elementul centrat este poziția: absolut, stânga: 50% și o marjă negativă-stânga, care este egală cu jumătate din lățimea elementului:
Sunt aliniat la centru
display: inline-block + text-align: center
Această metodă este potrivită pentru alinierea blocurilor de lățime necunoscută, dar necesită un înveliș părinte. De exemplu, în acest fel puteți centra un meniu orizontal:
Aliniere verticală
inaltimea liniei
Pentru a alinia o linie de text, puteți utiliza aceeași înălțime și aceeași distanță între rânduri pentru blocul părinte. Potrivit pentru butoane, elemente de meniu și multe altele.
Sunt aliniat vertical
poziție și marja negativă în sus
Un element poate fi aliniat vertical dându-i o înălțime fixă și aplicând o poziție: absolută și o marjă negativă în sus egală cu jumătate din înălțimea elementului aliniat. Blocului părinte trebuie să i se atribuie poziția: relativă:
Wrapper (poziție: relativ;) element (înălțime: 200px; marjă: -100px 0 0; poziție: absolut; sus: 50%;)
Astfel, folosind poziţionarea şi marginile negative, puteţi centra elementul pe pagină.
afișare: tabel-celulă
Pentru alinierea verticală, proprietatea display: table-cell este aplicată elementului, ceea ce îl face să emuleze o celulă de tabel. De asemenea, setăm înălțimea și alinierea verticală: la mijloc. Toate acestea le vom împacheta într-un container cu proprietatea dislpay: table; :
Sunt aliniat vertical
Alinierea dinamică a unui element pe pagină
Am acoperit modalități de a alinia elemente pe o pagină folosind CSS. Acum să aruncăm o privire asupra implementării variantei jQuery.
Să includem jQuery pe pagină:
Vă sugerez să scrieți o funcție simplă pentru a centra un element pe pagină, să-l numim alignCenter (). Elementul în sine acționează ca un argument al funcției:
Funcția alignCenter (elem) (// codează aici)
În corpul funcției, să calculăm dinamic și să agățăm coordonatele centrului paginii la proprietățile CSS din stânga și de sus:
Funcția alignCenter (elem) (elem.css ((stânga: ($ (fereastră) .width () - elem.width ()) / 2 + "px", sus: ($ (fereastră) .height () - elem. înălțime ()) / 2 + "px" // amintiți-vă să adăugați poziția: absolută la element pentru a declanșa coordonatele)))
În prima linie a funcției, obținem lățimea documentului și scădem din el lățimea elementului, împărțit la jumătate - acesta va fi centrul paginii pe orizontală. A doua linie face același lucru, doar cu înălțimea, pentru alinierea verticală.
Funcția este gata, rămâne să o agăți pe DOM-ul gata și evenimentele de redimensionare a ferestrei:
$ (funcția () (// apelează funcția de centrare când DOM-ul este gata alignCenter ($ (elem)); // apelează funcția când fereastra este redimensionată $ (window) .resize (funcția () (alignCenter ($ () elem));)) // funcția de centrare a elementului funcția alignCenter (elem) (elem.css ((// se calculează coordonatele din stânga și de sus la stânga: ($ (fereastră) .width () - elem.width ()) / 2 + „px”, sus: ($ (fereastră) .height () - elem.height ()) / 2 + „px”)))))
Folosind Flexbox
Noile funcții ale CSS3, cum ar fi Flexbox, devin treptat obișnuite. Tehnologia ajută la crearea aspectului fără a utiliza flotoare, poziționare etc. Poate fi folosit și pentru centrarea elementelor. De exemplu, să folosim flexbox pe .wrapper-ul părinte și să centrem conținutul în interior:
Wrapper (display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; înălțime: 500px; lățime: 500px;) .wrapper .conținut (marja: automat; / * marjă: 0 automat; numai pe orizontală * / / * marjă: automat 0; numai pe verticală * /)
Această regulă centrează elementul orizontal și vertical în același timp - marginea funcționează acum nu numai pentru alinierea orizontală, ci și pentru alinierea verticală. Și fără o lățime / înălțime cunoscută.
Resurse aferente
Ajută proiectul
Alinierea diferitelor elemente, cum ar fi pe un site web sau pe o pagină, este inițial o sarcină dificilă pentru cineva, care zguduie alinierea verticală a textului. În mod ciudat, una dintre cele mai dificile moduri de a folosi CSS este să vă centrați conținutul. Centrarea conținutului pe orizontală este relativ ușoară în anumite momente. Centrarea conținutului pe verticală este aproape întotdeauna dificilă. Centrarea unui alt element pentru a fi aliniat vertical folosind CSS. Aceasta este cu siguranță o întrebare foarte frecventă care pune probleme pentru designeri și webmasteri. Cu toate acestea, există multe tehnici de centrare verticală și fiecare dintre ele este destul de ușor de utilizat.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 modul implicit 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ă ca 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.
Când așezați o pagină, este adesea necesar să efectuați alinierea la centru într-un mod CSS: de exemplu, centrați blocul principal. Există mai multe opțiuni pentru rezolvarea acestei probleme, fiecare dintre acestea, mai devreme sau mai târziu, trebuie să fie folosită de orice designer de layout.
Aliniați la centru textul
Adesea, în scopuri decorative, trebuie să setați alinierea textului la centru, CSS în acest caz vă permite să reduceți timpul de compunere. Anterior, acest lucru se făcea folosind atribute HTML, dar acum standardul necesită alinierea textului folosind foi de stil. Spre deosebire de casete, pentru care trebuie să modificați marginile, în CSS, alinierea la centru a textului se face cu o singură linie:
- text-align: centru;
Această proprietate este moștenită și transmisă de la părinte către toți descendenții. Afectează nu numai textul, ci și alte elemente. Pentru a face acest lucru, acestea trebuie să fie inline (de exemplu, span) sau inline-block (orice blocuri care au setată proprietatea de afișare: bloc). Ultima opțiune vă permite, de asemenea, să modificați lățimea și înălțimea elementului, ajustați mai flexibil indentațiile.
Adesea, alinierea paginilor este atribuită etichetei în sine. Acest lucru face imediat codul invalid, deoarece atributul align a fost depreciat de W3C. Folosirea lui pe pagină nu este recomandată.
Alinierea unui bloc la centru
Dacă trebuie să setați div-ul să fie centrat, CSS poate oferi o modalitate destul de utilă de a face acest lucru: folosiți marginile. Indentațiile pot fi setate atât pentru elementele bloc, cât și pentru elementele bloc inline. Valoarea proprietății trebuie să ia valorile 0 (indentări verticale) și auto (indentări orizontale automate):
- marja: 0 auto;
Acum această opțiune specială este recunoscută ca fiind absolut valabilă. Utilizarea indentărilor externe vă permite, de asemenea, să setați alinierea la centru a imaginii: vă permite să rezolvați multe probleme asociate cu poziționarea unui element pe pagină.
Aliniați un bloc la stânga sau la dreapta
Uneori nu este necesară alinierea centrată pe CSS, dar trebuie să plasați două blocuri unul lângă altul: unul în stânga, celălalt în dreapta. Pentru a face acest lucru, există proprietatea float, care poate lua una dintre cele trei valori: stânga, dreapta sau niciunul. Să presupunem că aveți două blocuri care trebuie așezate unul lângă altul. Atunci codul va fi astfel:
- .stânga (float: stânga;)
- .right (float: dreapta)
Dacă există și un al treilea bloc care ar trebui să fie situat sub primele două blocuri (de exemplu, un subsol), atunci trebuie să înregistreze proprietatea clară:
- .stânga (float: stânga;)
- .right (float: dreapta)
- subsol (clar: ambele)
Cert este că blocurile cu clase stânga și dreapta cad din fluxul general, adică toate celelalte elemente ignoră însăși existența elementelor aliniate. Clar: ambele proprietăți permit subsolului sau oricărui alt bloc să vadă elementele care nu se încadrează în flux și nu permit flotari atât la stânga, cât și la dreapta. Prin urmare, în exemplul nostru, subsolul se va deplasa în jos.
Aliniere verticală
Există momente în care nu este suficient să setați alinierea la centru folosind metode CSS, trebuie să schimbați și poziția verticală a blocului copil. Orice element inline sau bloc poate fi fixat pe marginea de sus sau de jos, în mijlocul elementului părinte sau oriunde. Cel mai adesea, este necesară alinierea blocului în centru; pentru aceasta, se utilizează atributul vertical-align. Să presupunem că există două blocuri, unul imbricat în celălalt. În acest caz, blocul interior este un element inline-block (afișare: inline-block). Trebuie să aliniați blocul copil pe verticală:
- aliniere de sus - .copil (aliniere verticală: sus);
- aliniere la centru - .copil (aliniere-vertical: mijloc);
- aliniere de jos - .copil (aliniere verticală: de jos);
Nici alinierea textului, nici alinierea verticală nu afectează elementele blocului.
Posibile probleme cu blocurile aliniate
Uneori, alinierea unui div la centru într-un mod CSS poate cauza mici probleme. De exemplu, când folosiți float: să presupunem că există trei blocuri: .first, .second și .third. Al doilea și al treilea bloc sunt în primul. Elementul cu clasa secundă este aliniat la stânga, iar ultimul bloc este aliniat la dreapta. După aliniere, ambele au căzut din flux. Dacă elementul părinte nu are o înălțime specificată (de exemplu, 30em), atunci se va opri întinderea de-a lungul înălțimii blocurilor copil. Pentru a evita această eroare, utilizați un „spacer” - un bloc special care vede .second și .third. Cod CSS:
- .secunda (float: stânga)
- .a treia (float: dreapta)
- .clearfix (înălțime: 0; clar: ambele;)
Se folosește adesea pseudo-clasa: after, care vă permite, de asemenea, să puneți blocuri înapoi în loc prin crearea unui pseudo-aspect (în exemplu, un div cu o clasă container se află în interiorul .first și conține .left și .right):
- .stânga (float: stânga)
- .right (float: dreapta)
- .container: după (conținut: ""; afișare: tabel; clar: ambele;)
Opțiunile de mai sus sunt cele mai comune, deși există mai multe variante. Puteți găsi întotdeauna cel mai simplu și mai convenabil mod de a crea un pseudo-aspect prin experimentare.
O altă problemă cu care se confruntă adesea designerii de layout este alinierea elementelor din blocuri inline. Un spațiu este adăugat automat după fiecare dintre ele. Proprietatea marjă ajută la rezolvarea acestui lucru, care este setată la o marjă negativă. Există și alte metode care sunt folosite mult mai rar: de exemplu, zeroing În acest caz, font-size: 0 este scris în proprietățile elementului părinte. Dacă există text în interiorul blocurilor, atunci dimensiunea necesară a fontului este deja returnată în proprietățile elementelor de bloc inline. De exemplu dimensiunea fontului: 1em. Metoda nu este întotdeauna convenabilă, prin urmare, opțiunea cu indentări externe este mult mai des utilizată.
Alinierea blocurilor vă permite să creați pagini frumoase și funcționale: acesta este aspectul aspectului general și locația mărfurilor în magazinele online și a fotografiilor pe un site de cărți de vizită.
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, se poate aplica proprietatea line-height. 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 un descendent 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.
Centrarea unei linii este prescrisă pentru blocul exterior.
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 elementul interior nu.
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.
