Meniul
AcasăCuvânt

Alinierea verticală a elementelor folosind CSS. Alinierea orizontală și verticală a elementelor

  • CSS
  • HTML

    • Cred că mulți dintre voi care ați avut de-a face cu aspectul ați întâmpinat nevoia de a alinia elementele pe verticală și de a cunoaște dificultățile care apar la alinierea unui element la centru.

    Da, există o proprietate specială de aliniere verticală cu mai multe valori în CSS pentru alinierea verticală. Cu toate acestea, în practică, nu funcționează deloc așa cum era de așteptat. Să încercăm să ne dăm seama.


    Să comparăm următoarele abordări. Aliniați folosind:

    • Mese,
    • indentare,
    • inaltimea liniei
    • întindere,
    • marja negativa,
    • transforma
    • pseudo element
    • flexbox.
    Pentru a ilustra, luați în considerare următorul exemplu.

    Există două elemente div, unul dintre ele imbricat în celălalt. Să le dăm clasele corespunzătoare - exterioare și interioare.


    Provocarea este de a alinia elementul interior cu centrul elementului exterior.

    În primul rând, să luăm în considerare cazul când dimensiunile blocurilor externe și interne cunoscut. Să adăugăm afișarea regulii: bloc inline la elementul interior și text-align: centru și vertical-align: mijloc la elementul exterior.

    Amintiți-vă că alinierea se aplică numai elementelor care au un mod de afișare în linie sau bloc în linie.

    Să setăm dimensiunile blocurilor, precum și culorile de fundal, astfel încât să le vedem marginile.

    Exterior ( lățime: 200 px; înălțime: 200 px; aliniere text: centru; aliniere verticală: mijloc; culoare de fundal: #ffc; ) . interior ( afișare: bloc inline; lățime: 100 px; înălțime: 100 px; culoare de fundal : #fcc; )
    După aplicarea stilurilor, vom vedea că blocul interior este aliniat orizontal, dar nu vertical:
    http://jsfiddle.net/c1bgfffq/

    De ce s-a întâmplat? Chestia este că proprietatea de aliniere verticală afectează alinierea elementul în sine, nu conținutul său(cu excepția cazului în care este aplicat celulelor tabelului). Prin urmare, aplicarea acestei proprietăți elementului exterior nu a produs nimic. Mai mult, aplicarea acestei proprietăți unui element interior nu va face nimic, deoarece blocurile inline sunt aliniate vertical față de blocurile adiacente, iar în cazul nostru avem un bloc inline.

    Există mai multe tehnici pentru a rezolva această problemă. Mai jos vom arunca o privire mai atentă asupra fiecăruia dintre ele.

    Alinierea folosind un tabel

    Prima soluție care îmi vine în minte este înlocuirea blocului exterior cu un tabel dintr-o celulă. În acest caz, alinierea va fi aplicată conținutului celulei, adică blocului interior.


    http://jsfiddle.net/c1bgfffq/1/

    Dezavantajul evident al acestei soluții este că, din punct de vedere semantic, este incorect folosirea tabelelor pentru aliniere. Al doilea dezavantaj este că crearea unui tabel necesită adăugarea unui alt element în jurul blocului exterior.

    Primul minus poate fi eliminat parțial prin înlocuirea etichetelor table și td cu div și setarea modului de afișare a tabelului în CSS.


    .outer-wrapper ( display: table; ) .outer ( display: table-cell; )
    Cu toate acestea, blocul exterior va rămâne în continuare un tabel cu toate consecințele care decurg.

    Alinierea folosind indentarea

    Dacă înălțimile blocurilor interioare și exterioare sunt cunoscute, atunci alinierea poate fi stabilită folosind indentările verticale ale blocului interior folosind formula: (H exterior – H interior) / 2.

    Exterior ( înălțime: 200px; ) .interior (înălțime: 100px; margine: 50px 0; )
    http://jsfiddle.net/c1bgfffq/6/

    Dezavantajul soluției este că este aplicabilă doar într-un număr limitat de cazuri când se cunosc înălțimile ambelor blocuri.

    Alinierea folosind înălțimea liniei

    Dacă știți că blocul interior nu trebuie să ocupe 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 trebuie să se încadreze la a doua linie, se recomandă să adăugați și spațiul alb: nowrap și overflow: reguli ascunse.

    Exterior ( înălțime: 200 px; înălțime linie: 200 px; ) . interior ( spațiu alb: nowrap; overflow: ascuns; )
    http://jsfiddle.net/c1bgfffq/12/

    Această tehnică poate fi folosită și pentru a alinia textul cu mai multe linii dacă redefiniți valoarea înălțimii liniei pentru blocul interior și, de asemenea, adăugați afișajul: inline-block și vertical-align: middle rules.

    Exterior ( înălțime: 200 px; înălțime linie: 200 px; ) . interior ( înălțime linie: normal; afișare: bloc în linie; aliniere verticală: mijloc; )
    http://jsfiddle.net/c1bgfffq/15/

    Dezavantajul acestei metode este că trebuie cunoscută înălțimea blocului exterior.

    Alinierea folosind „stretch”

    Această metodă poate fi utilizată atunci când înălțimea blocului extern este necunoscută, dar este cunoscută înălțimea blocului intern.

    Pentru a face acest lucru aveți nevoie de:

    1. setați poziționarea relativă față de blocul extern și poziționarea absolută față de blocul intern;
    2. adăugați regulile de sus: 0 și de jos: 0 la blocul interior, drept urmare se va întinde pe toată înălțimea blocului exterior;
    3. setați umplutura verticală a blocului interior la automat.
    .exterior (poziție: relativă; ) .interior (înălțime: 100px; poziție: absolut; sus: 0; jos: 0; margine: auto 0; )
    http://jsfiddle.net/c1bgfffq/4/

    Ideea din spatele acestei tehnici este că setarea unei înălțimi pentru un bloc întins și poziționat absolut face ca browserul să calculeze umplutura verticală într-un raport egal dacă este setat la automat.

    Aliniere cu marginea negativă-sus

    Această metodă a devenit cunoscută pe scară largă și este folosită foarte des. Ca și precedentul, se folosește atunci când înălțimea blocului exterior este necunoscută, dar este cunoscută înălțimea celui interior.

    Trebuie să setați blocul extern la poziționare relativă, iar blocul intern la poziționare absolută. Apoi trebuie să mutați blocul interior în jos cu jumătate din înălțimea superioară a blocului exterior: 50% și să-l ridicați cu jumătate de înălțime margine-top: -H interior / 2.

    Exterior (poziție: relativă; ) .interior (înălțime: 100px; poziție: absolut; sus: 50%; margine-sus: -50px; )
    http://jsfiddle.net/c1bgfffq/13/

    Dezavantajul acestei metode este că trebuie cunoscută înălțimea unității interioare.

    Alinierea cu transformarea

    Această metodă este similară cu cea anterioară, dar poate fi folosită atunci când înălțimea unității interioare este necunoscută. În acest caz, în loc să setați o umplutură negativă de pixeli, puteți utiliza proprietatea de transformare și puteți muta blocul interior în sus folosind funcția translateY și o valoare de -50% .

    Exterior ( poziție: relativ; ) .intern ( poziție: absolut; sus: 50%; transform: translateY(-50%); )
    http://jsfiddle.net/c1bgfffq/9/

    De ce a fost imposibil să setați valoarea ca procent în metoda anterioară? Deoarece valorile procentuale ale marjei sunt calculate în raport cu elementul părinte, o valoare de 50% ar fi jumătate din înălțimea cutiei exterioare și ar trebui să ridicăm cutia interioară la jumătate din înălțimea proprie. Proprietatea de transformare este perfectă pentru aceasta.

    Dezavantajul acestei metode este că nu poate fi folosită dacă unitatea interioară are poziționare absolută.

    Aliniere cu Flexbox

    Cel mai modern mod de aliniere verticală este utilizarea Flexible Box Layout (cunoscută în mod popular sub numele de Flexbox). Acest modul vă permite să controlați în mod flexibil poziționarea elementelor pe pagină, aranjandu-le aproape oriunde. Alinierea la centru pentru Flexbox este o sarcină foarte simplă.

    Blocul exterior trebuie setat să afișeze: flex și blocul interior la margine: auto . Și este tot! Frumos, nu-i așa?

    Exterior ( afișaj: flex; lățime: 200 px; înălțime: 200 px; ) . interior ( lățime: 100 px; margine: automat; )
    http://jsfiddle.net/c1bgfffq/14/

    Dezavantajul acestei metode este că Flexbox este acceptat doar de browserele moderne.

    Ce metodă ar trebui să aleg?

    Trebuie să începeți de la declarația problemei:
    • Pentru a alinia textul pe verticală, este mai bine să utilizați indentări verticale sau proprietatea line-height.
    • Pentru elementele poziționate absolut cu o înălțime cunoscută (de exemplu, pictograme), metoda cu o proprietate negativă margin-top este ideală.
    • Pentru cazuri mai complexe, când înălțimea blocului este necunoscută, trebuie să utilizați un pseudo element sau proprietatea transform.
    • Ei bine, dacă sunteți atât de norocos încât nu aveți nevoie să susțineți versiuni mai vechi ale browserului IE, atunci, desigur, este mai bine să utilizați Flexbox.

    În CSS, unele lucruri aparent simple nu sunt atât de ușor de făcut. Unul dintre aceste lucruri este alinierea, adică. când un element trebuie poziționat într-un anumit mod față de altul.

    Acest articol prezintă câteva soluții gata făcute care vor ajuta la simplificarea activității de centrare a elementelor pe orizontală și/sau verticală.

    Notă: Sub fiecare soluție este o listă de browsere care indică versiunile în care funcționează codul CSS specificat.

    CSS - Center Align Block

    1. Alinierea unui bloc la centrul altuia. În acest caz, primul și al doilea bloc au dimensiuni dinamice.

    ...
    ...

    Părinte ( poziție: relativ; ) .copil ( poziție: absolut; stânga: 50%; sus: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50% , -50%); -ms-transform: traducere(-50%, -50%); -o-transform: traducere (-50%, -50%); transformare: traducere (-50%, -50%) ;)

    • Chrome 4.0+
    • Firefox 3.6+
    • Internet Explorer 9+
    • Opera 10.5+
    • Safari 3.1+

    2. Alinierea unui bloc la centrul altuia. În acest caz, al doilea bloc are dimensiuni fixe.

    Părinte (poziție: relativă; ) .copil (poziția: absolut; stânga: 50%; sus: 50%; /* lățime și înălțime a 2 blocuri */ lățime: 500px; înălțime: 250px; /* Valorile sunt determinate în funcție de pe dimensiunea sa */ /* margin-left = - lățime / 2 */ margin-left: -250px; /* margin-top = - înălțime / 2 */ margin-top: -125px; )

    Browsere care acceptă această soluție:

    • Chrome 1.0+
    • Firefox 1.0+
    • Internet Explorer 4.0+
    • Opera 7.0+
    • Safari 1.0+

    3. Alinierea unui bloc la centrul altuia. În acest caz, al doilea bloc are dimensiuni specificate în procente.

    Părinte ( poziție: relativ; ) .copil (poziția: absolut; /* lățime și înălțime a 2 blocuri în % */ înălțime: 50%; lățime: 50%; /* Valorile se determină în funcție de mărimea acestuia în % * / stânga: 25%; /* (100% - lățime) / 2 */ sus: 25%; /* (100% - înălțime) / 2 */ )

    Browsere care acceptă această soluție:

    • Chrome 1.0+
    • Firefox 1.0+
    • Internet Explorer 4.0+
    • Opera 7.0+
    • Safari 1.0+

    CSS - Aliniere orizontală

    1. Alinierea unui element bloc (afișare: bloc) față de altul (în care se află) pe orizontală:

    ...
    ...

    Blocare ( margine-stânga: automat; margine-dreapta: automat; )

    Browsere care acceptă această soluție:

    • Chrome 1.0+
    • Firefox 1.0+
    • Internet Explorer 6.0+
    • Opera 3.5+
    • Safari 1.0+

    2. Alinierea orizontală a unui element de linie (display: inline) sau line-block (display: inline-block):

    ...
    ...

    Părinte ( text-align: center; ) .child (afișare: inline-block; )

    Browsere care acceptă această soluție:

    • Chrome 1.0+
    • Firefox 3.0+
    • Internet Explorer 8.0+
    • Opera 7.0+
    • Safari 1.0+

    CSS - Aliniere verticală

    1. Centrați un element (display: inline, display: inline-block) față de celălalt (în care se află) în centru. Blocul părinte din acest exemplu are o înălțime fixă, care este setată folosind proprietatea CSS line-height.

    ...
    ...

    Părinte ( line-height: 500px; ) .child (afișare: inline-block; vertical-align: middle; )

    Browsere care acceptă această soluție:

    • Chrome 1.0+
    • Firefox 3.0+
    • Internet Explorer 8.0+
    • Opera 7.0+
    • Safari 1.0+

    2. Centrarea unui bloc față de altul pe verticală prin reprezentarea părintelui ca tabel, iar copilul ca o celulă a acestui tabel.

    Părinte ( display: table; ) .child ( display: table-cell; vertical-align: middle; )

    Browsere care acceptă această soluție:

    • Chrome 1.0+
    • Firefox 1.0+
    • Internet Explorer 8.0+
    • Opera 7.5+
    • Safari 1.0+

    Dacă cunoașteți alte trucuri interesante sau soluții utile de aliniere gata făcute, atunci împărtășiți-le în comentarii.

    Proprietatea CSS vertical-align este responsabilă pentru alinierea verticală a textului și imaginilor de pe pagină. Caracteristica importantă este că funcționează numai cu elemente de tabel, elemente inline și inline-block. Sprijinit de toate browserele moderne.

    Sintaxă CSS vertical-align

    ... vertical-align : valoare ; ...
    • linia de bază - alinierea la linia de bază a strămoșului (sau pur și simplu limita inferioară a părintelui)
    • jos - aliniați la partea de jos a liniei (sau elementul care se află sub toate)
    • mijloc - aliniați punctul de mijloc al elementului la linia de bază a părintelui plus jumătate din înălțimea părintelui
    • sub - afișarea apare sub linie (arata ca un indice)
    • super - afișarea are loc deasupra liniei (ca superscript)
    • text-bottom - aliniați marginea de jos a elementului la marginea de jos a liniei
    • text-top - aliniați marginea superioară a elementului la marginea superioară a liniei
    • sus - aliniați marginea superioară a elementului cu partea de sus a celui mai înalt element de pe linie
    • inherit - moștenește valoarea părintelui
    • valoare - indicată în pixeli. Un număr pozitiv se deplasează în sus față de linia de bază. Negativ jos
    • dobândă – indicată în procente. Un număr pozitiv se deplasează în sus față de linia de bază. Negativ jos

    Valoarea implicită de aliniere verticală:

    • linie de bază (pentru elemente în linie)
    • mijloc (pentru celulele tabelului)

    Alinierea verticală în tabele

    Cea mai comună utilizare a vertical-align este în celulele tabelului. În etichetă

    utilizați atributul valign.

    Sintaxă CSS valign pentru tabele

    Unde valoarea poate lua următoarele valori:

    • linie de bază - alinierea la linia de bază a primei linii de text
    • jos - aliniați la marginea de jos a celulei tabelului
    • mijloc - alinierea la mijlocul celulei
    • sus - aliniați la marginea superioară a celulei

    De exemplu:

    sau
    Aliniați la partea de sus
    Alinierea la centru
    Alinierea de jos
    Aliniați la partea de sus
    Alinierea la centru
    Alinierea de jos

    Exemple cu aliniamente verticale

    Exemplul 1. Valori de aliniere verticală: linie de bază, jos, sus, sub


    Text aliniat vert_align_baseline
    Text aliniat vert_align_bottom
    Text aliniat vert_align_top
    Text cu aliniere vert_align_sub

    Exemplul 2: valori de aliniere verticală: valori absolute și procente

    Mai jos sunt exemple de aliniere verticală cu valoare absolută și procente.





    Se convertește în următoarele pe pagină:

    Șir sursă. Text aliniat cu 10 pixeli în sus
    Șir sursă. Text aliniat cu 5 pixeli în jos
    Șir sursă. Text aliniat cu 50% în sus
    Șir sursă. Text aliniat cu 30% în jos

    Notă

    Valoarea vertical-align: middle nu aliniază elementul în linie la centrul celui mai mare element din linie (cum ar fi de așteptat). În schimb, valoarea mijlocului aliniază elementul în raport cu un ipotetic „X” minuscul (numit și înălțimea x).

    Pentru a accesa vertical-align din JavaScript, trebuie să scrieți următoarea construcție:

    object.style.verticalAlign ="VALUE "

    Problema centrerii verticale a elementelor în CSS are o serie de soluții gata făcute. Alegerea metodei de aliniere în fiecare caz individual depinde de tipul, dimensiunea, poziționarea elementelor și alte proprietăți specificate pentru acestea.

    Mai jos sunt câteva tehnici populare de aliniere verticală printre designerii de layout. Arată cum funcționează și pentru ce cazuri fiecare dintre ele este cel mai potrivit.

    Iată două elemente div:



    Fiecare metodă va fi utilizată pentru a alinia unitatea interioară cu centrul unității exterioare.

    înălțimea liniei pentru o linie

    Când părintele ocupă 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 să adăugați overflow: ascuns și spațiu alb: nowrap pentru copil.

    Nu se va putea folosi notația procentuală line-height=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 dacă se cunoaște înălțimea blocului exterior.

    Tabel cu aliniere verticală

    O masă este ideală pentru alinierea verticală a elementelor. Pentru a nu încălca 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 pentru această proprietate în tabele:

    Linie de bază - implicit;
    . jos — conținut în partea de jos a celulei;
    . mijloc — conținut în mijlocul celulei;
    . top — conținut din partea de sus a celulei.

    În primul exemplu, o singură celulă de tabel devine blocul exterior.

    Container (
    afisare: tabel-celula;
    vertical-align: mijloc;
    }

    Lucrul bun la această metodă este că funcționează pentru elemente fără o înălțime dată, dar în unele cazuri utilizarea sa este îngreunată de faptul că blocul exterior, ca orice celulă de tabel, își ajustează lățimea la conținutul său și îl poți întinde. numai prin setarea explicită a lățimii pentru lățime. Pentru o celulă fără tabel, procentele nu funcționează adecvat.

    Acest neajuns este corectat prin împachetarea celulei în părinte cu proprietatea display:table. Mărimea acestui element poate fi setată 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 intern. Poate fi necunoscut de unitatea externă. Părintelui i se oferă o poziție relativă, iar copilului din interiorul acestuia i se oferă o poziție absolută.

    O valoare a proprietății superioare de 50% face ca elementul imbricat să fie poziționat cu marginea superioară în mijlocul blocului exterior. Tot ce rămâne este să-și ridice marginea negativă la jumătate din înălțimea proprie, astfel încât să stea exact în centrul verticalei.

    Container (
    poziție: relativă;
    }

    interior (
    inaltime: 140px;
    poziție: absolută;
    sus: 50%;
    margine-top: -70px;
    }

    Dezavantajul acestei metode este necesitatea de a cunoaste inaltimea copilului.

    Alinierea în linie cu vertical-align

    Alinierea elementelor inline și inline-block, inclusiv imagini și pictograme, în textul din jur este realizată prin 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 blocul interior este redefinită la normal sau la orice valoare dorită. De asemenea, i se oferă alinierea vertical-align: middle și conversia la un tip de bloc inline - afișare: bloc inline.

    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 de î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ă blocul interior, astfel încât marginea sa superioară să fie poziționată în mijlocul părintei. Valoarea translateY: -50% ridică elementul la jumătate din înălțimea proprie și astfel aliniază centrele verticale ale blocurilor.

    Container (
    poziție: relativă;
    }

    interior (
    poziție: absolută;
    sus: 50%;
    transforma: translateY(-50%);
    }

    Dezavantajul acestei tehnici este suportul limitat pentru funcțiile de transformare din browserul IE.

    Aliniere prin pseudo-element

    Metoda funcționează atunci când înălțimea nu este cunoscută nici pentru primul, nici pentru al doilea bloc. Un pseudo-element de bloc inline este adăugat în interiorul părinte folosind înainte sau 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 setată folosind vertical-align: middle.

    Folosind vertical-align: middle, blocul interior este aliniat relativ la acest pseudo-element. Deoarece părintele și copilul au aceeași înălțime, elementul interior, deși este aliniat vertical cu pseudo-elementul, este de asemenea centrat cu caseta exterioară.

    Container: înainte de (
    continut: "";
    inaltime: 100%;
    vertical-align: mijloc;
    display: inline-block;
    }

    interior (
    display: inline-block;
    vertical-align: mijloc;
    }

    Metoda universală. Nu funcționează dacă unitatea interioară este setată pe poziție absolută.

    Flexbox

    Cel mai nou și mai ușor mod de a alinia elementele pe verticală. Flexbox vă permite să aranjați elementele unei pagini Web după cum doriți. Pentru a centra un bloc, trebuie doar să setați afișaj: flex pentru părinte și margine: auto pentru copil.

    Container (
    display: flex;
    lățime: 320px;
    inaltime: 140px;
    }

    interior (
    latime: 120px;
    margine: auto;
    }

    Flexbox funcționează numai în browserele moderne.

    Alegerea unei metode

    Ce tehnică de aliniere verticală să utilizați depinde de sarcină și de limitările care pot fi prezente în orice caz particular.

    Înălțimea elementelor este necunoscută

    În această situație, puteți utiliza una dintre cele patru metode universale:

    1. Tabelul. Părintele devine o celulă de tabel creată în HTML sau prin display-table/display-cell. Acest element părinte este dat vertical-align: middle.

    2. Pseudo-element. Pentru blocul exterior, un pseudo-element de bloc inline este creat cu width=100% și vertical-align: middle. Copilului i se oferă afișare: bloc inline și aliniere verticală: mijloc. Metoda nu funcționează numai atunci când blocului intern i se oferă o poziționare absolută.

    3. Transformă. Părintele capătă poziție: rudă. Copilului i se dă poziția: absolut, top: 50% și transform: translateY(-50%);

    4. Flexbox. Blocul exterior este setat să afișeze: flex, blocul interior este setat la margine: auto.

    Se cunoaște doar înălțimea copilului

    Unitatea externă este poziționată relativ; Elementului interior i se dă o poziționare absolută, de sus: 50% și o marjă de sus egală cu jumătate din înălțimea sa.

    O linie pe bloc cu înălțime cunoscută

    Blocului exterior i se dă 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ălțimea liniei copilului este redefinită la normal sau la orice valoare dorită și îi sunt date: inline-block și vertical-align: middle.

    Când așezați o pagină, este adesea necesar să efectuați alinierea la centru folosind metoda CSS: de exemplu, centrarea blocului 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.

    Centrare alinierea textului

    Adesea, în scopuri decorative, este necesar să setați textul la aliniere la centru; CSS în acest caz vă permite să reduceți timpul de aspect. Anterior, acest lucru se făcea folosind atribute HTML, dar acum standardul cere ca textul să fie aliniat folosind foi de stil. Spre deosebire de blocuri, pentru care trebuie să modificați marginile, în CSS, centrarea textului se face folosind o singură linie:

    • text-align:center;

    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 display: block). Această ultimă opțiune vă permite, de asemenea, să modificați lățimea și înălțimea elementului și să reglați indentările mai flexibil.

    Adesea, pe pagini, alinierea este atribuită etichetei în sine. Acest lucru invalidează imediat codul, deoarece W3C a depreciat atributul align. Utilizarea acestuia pe o pagină nu este recomandată.

    Alinierea unui bloc la centru

    Dacă trebuie să centrați un div, CSS oferă o modalitate destul de convenabilă: utilizarea marginilor. Indentațiile pot fi setate atât pentru elementele bloc, cât și pentru elementele bloc inline. Valoarea proprietății ar trebui să fie 0 (căptușeală verticală) și automată (căptușeală orizontală automată):

    • margine:0 auto;

    Acum această opțiune este recunoscută ca fiind absolut valabilă. Folosirea padding-ului extern vă permite și să setați imaginea să fie centrată: vă permite să rezolvați multe probleme legate de poziționarea unui element pe pagină.

    Aliniați un bloc la stânga sau la dreapta

    Uneori nu este necesară alinierea centrului CSS, dar trebuie să plasați două blocuri unul lângă altul: unul pe marginea stângă, celălalt pe dreapta. În acest scop, există o proprietate 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:

    • .left (float:left;)
    • .right(float:right)

    Dacă există și un al treilea bloc, care ar trebui să fie situat sub primele două blocuri (de exemplu, un subsol), atunci trebuie să i se atribuie proprietatea clear:

    • .left (float:left;)
    • .right(float:right)
    • subsol (clear:both)

    Cert este că blocurile cu clasele stânga și dreapta cad din fluxul general, adică toate celelalte elemente ignoră însăși existența elementelor aliniate. Proprietatea clear:both permite subsolului sau oricărui alt bloc să vadă elementele care au căzut din flux și interzice plutirea atât în ​​stânga, cât și în 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; de asemenea, trebuie să schimbați poziția verticală a blocului copil. Orice element în linie sau în bloc poate fi imbricat la marginea de sus sau de jos, în mijlocul unui element părinte sau în orice locație. Cel mai adesea, blocul trebuie aliniat la centru; pentru aceasta, se folosește 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 - .child(vertical-align:top);
    • aliniere la centru - .child(vertical-align:middle);
    • aliniere de jos - .child(vertical-align:bottom);

    Nici alinierea textului, nici alinierea verticală nu afectează elementele blocului.

    Posibile probleme cu blocurile aliniate

    Uneori, centrarea unui div folosind 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 se află în primul. Elementul cu clasa secundă este aliniat la stânga, iar ultimul bloc este aliniat la dreapta. După stabilizare, ambele au căzut din flux. Dacă elementul părinte nu are un set de înălțime (de exemplu, 30em), atunci nu se va mai întinde la înălțimea blocurilor sale copil. Pentru a evita această eroare, utilizați un „spacer” - un bloc special care vede .second și .third. Cod CSS:

    • .second(float:left)
    • .a treia (float:right)
    • .clearfix(înălțime: 0; clar: ambele;)

    Pseudo-clasa:after este adesea folosită, ceea ce vă permite, de asemenea, să returnați blocurile la locul lor prin crearea unui pseudo-spacer (în exemplu, un div cu clasa container se află în interior.first și conține.stânga și.dreapta) :

    • .left(float:left)
    • .right(float:right)
    • .container:după(conținut:""; afișare:tabel; clear:both;)

    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-distanțier prin experimentare.

    O altă problemă pe care o întâmpină adesea designerii de layout este alinierea elementelor în bloc. Un spațiu este adăugat automat după fiecare dintre ele. Proprietatea marjei, care este setată la o liniuță negativă, ajută la rezolvarea acestui lucru. 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, font-size:1em. Această metodă nu este întotdeauna convenabilă, așa că opțiunea cu indentări externe este mult mai des folosită.

    Alinierea blocurilor vă permite să creați pagini frumoase și funcționale: aceasta include aspectul aspectului general, aranjarea produselor în magazinele online și fotografii de pe un site web de cărți de vizită.