Meniul
AcasăAvarii

Centrarea CSS a blocurilor DIV: orizontală și verticală. Metode pentru alinierea centrală verticală în CSS

Articolul de astăzi își propune să vă arate cum să centrați un div, atât pe orizontală, cât și pe verticală, folosind câteva trucuri CSS. De asemenea, vă vom spune cum să centrați întreaga pagină sau într-un element div individual.

Centrați cu ușurință un element DIV pe pagină

Această metodă va funcționa perfect în toate browserele.

CSS

Center-div (marja: 0 automat; lățime: 100px; )

Exemplu

Valoarea auto din proprietatea margine setează marginile din stânga și din dreapta la întregul spațiu disponibil pe pagină. Lucrul important de reținut aici este că elementul div centrat trebuie să aibă setată o valoare a lățimii.

Centrarea unui DIV în interiorul unui element DIV în mod vechi

Această metodă div de aliniere centrală va funcționa în toate browserele.

CSS

Outer-div ( umplutură: 30 px; ) . inner-div ( marjă: 0 automat; lățime: 100 px; )

HTML

Exemplu

Div-ul exterior poate fi plasat în orice mod doriți, dar div-ul interior trebuie să aibă o lățime (lățime) specificată.

Centrarea unui DIV în interiorul unui 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 ( display: 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 și, de asemenea, ca bloc (inline-block). Proprietatea text-align pe elementul div exterior ne va permite să centrem div-ul interior.

Centrați un DIV în interiorul unui element 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 ( umplutură: 30 px; ) . inner-div ( margine: automată; lățime: 100 px; înălțime: 100 px; )

HTML

Exemplu

Elementul div interior trebuie să aibă o lățime (lățime) și o înălțime (înălțime) specificate. Metoda nu va funcționa dacă elementul div exterior are o înălțime fixă.

Centrați DIV în partea de jos a paginii

Aici margin: auto este folosit pentru a centra div-ul pe verticală, iar poziționarea absolută este folosită pentru elementul exterior. Metoda va funcționa în toate browserele moderne.

CSS

Div-exterior (poziție: absolut; jos: 30 px; lățime: 100%; ) .div-interior (marja: 0 automat; lățime: 100 px; înălțime: 100 px; 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 folosind proprietatea de jos a div-ului exterior. De asemenea, puteți centra un div în partea de sus a paginii, înlocuind proprietatea de jos cu proprietatea de sus.

Centrați DIV-urile pe pagină vertical și orizontal

Aici, pentru a centra div-ul, folosim din nou margin: poziționarea automată și 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ă o lățime (lățime) și o înălțime (înălțime).

Realizarea de centrare adaptivă a unui element DIV pe pagină

Aici, pentru a centra div-ul folosind CSS, facem ca lățimea elementului div să răspundă, astfel încât să răspundă la modificările dimensiunii ferestrei. Această metodă funcționează în toate browserele.

CSS

Center-div (marja: 0 automat; lățime maximă: 700px; )

Exemplu

Un element div centrat trebuie să aibă proprietatea de lățime maximă setată.

Centrarea unui DIV în interiorul unui element folosind proprietățile blocului interior

Elementul interior div aici este receptiv. Această metodă de centrare a unui div în interiorul unui div 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ă proprietatea de lățime maximă setată.

Centrarea a două div-uri receptive una lângă alta

Aici avem două elemente div receptive una lângă alta. Această metodă de a plasa un div î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ățime maximă: 600 px) ( .left-div, .right-div ( lățime maximă stânga: 100%; ) )

HTML

Exemplu

Aici avem mai multe elemente cu proprietatea inline-block aplicată, situate î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 atât pentru div-ul din stânga cât și din dreapta este setată la 100%.

Element DIV centrat folosind Flexbox

Aici centrem div-ul CSS folosind Flexbox. Este destinat să faciliteze procesul de dezvoltare a design-urilor de interfață cu utilizatorul. Acest modul este acceptat de Chrome 38+, IE11, Microsoft Edge, Firefox 38+, Safari 9+, Opera 30+, iOS Safari 9+, precum și Android Browser 40+.

CSS

Container ( display: flex; align-items: center; justify-content: center; înălțime: 100vh; ) .item (culoare fundal: #f3f2ef; chenar-radius: 3px; lățime: 200px; înălțime: 100px; )

Foarte des în aspect este necesară centrarea unui element orizontal și/sau vertical. Prin urmare, am decis să fac un articol cu ​​moduri diferite de centrare, astfel încât totul să fie la îndemână într-un singur loc.

Marja de aliniere orizontală: automată

Alinierea orizontală folosind marginea 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 automată pentru marginile 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 centrarea textului într-un bloc. text-align: center:

Aliniere cu text-align .wrapper ( text-align: center; )

Sunt aliniat la centru

poziție și marja negativă stângă

Potrivit pentru centrarea blocurilor de lățime cunoscută. Oferim poziția blocului părinte: relativ la poziția relativ la acesta, poziția elementului centrat: absolut , stânga: 50% și o marjă negativă-stânga a cărei valoare este egală cu jumătate din lățimea elementului:

Aliniere cu poziția .wrapper ( poziție: relativ; ) .wrapper p ( stânga: 50%; marjă: 0 0 0 -100px; poziție: absolut; lățime: 200px; )

Sunt aliniat la centru

display: inline-block + text-align: center

Metoda este potrivită pentru alinierea blocurilor de lățime necunoscută, dar necesită un părinte de ambalare. De exemplu, puteți centra un meniu orizontal astfel:

Aliniere cu afișaj: inline-block + text-align: center; .navigation ( text-align: center; ) .navigation li ( display: inline-block; )

  • Acasă
  • Despre autor

Linie de aliniere verticală-înălțime

Pentru a alinia o linie de text, puteți utiliza aceleași valori de înălțime și spațiere între rânduri pentru blocul părinte. Potrivit pentru butoane, elemente de meniu etc.

line-height .wrapper ( înălțime: 100px; line-height: 100px; )

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ă; ) elem ( înălțime: 200px; margine: -100px 0 0; poziție: absolut; sus: 50%; )

Astfel, folosind poziţionarea şi marginile negative, puteţi centra un element pe pagină.

afișare: tabel-celulă

Pentru alinierea verticală, proprietatea display: table-cell este aplicată elementului, ceea ce îl forțează să emuleze o celulă de tabel. De asemenea, îi setăm înălțimea și alinierea verticală: mijloc . Să înfășurăm toate acestea într-un container cu proprietatea dislpay:; :

Afișare aliniere verticală: table-cell .wrapper ( afișare: tabel; lățime: 100%; ) .cell ( afișare: table-cell; înălțime: 100px; vertical-align: middle; )

Sunt aliniat vertical

Alinierea dinamică a unui element pe o pagină

Am analizat modalități de a alinia elemente pe o pagină folosind CSS. Acum să aruncăm o privire la implementarea jQuery.

Să conectăm jQuery la 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, calculăm dinamic și atribuim coordonatele centrului paginii proprietăților CSS din stânga și de sus:

Funcția alignCenter(elem) ( elem.css(( stânga: ($(window).width() - elem.width()) / 2 + "px", sus: ($(window).height() - elem. height()) / 2 + "px" // nu uitați să adăugați poziție: absolută elementului 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 orizontal al paginii. A doua linie face același lucru, doar cu înălțimea pentru aliniere verticală.

Funcția este gata, tot ce rămâne este să o atașați la evenimentele de pregătire DOM și de redimensionare a ferestrei:

$(function() ( // apelează funcția de centrare când DOM-ul este gata alignCenter($(elem)); // apelează funcția când redimensionează fereastra $(window).resize(function() ( alignCenter($(elem) )); )) // funcția de centrare a elementelor alignCenter(elem) ( elem.css(( // se calculează coordonatele stânga și sus la stânga: ($(window).width() - elem.width()) / 2 + " px", sus: ($(window).height() - elem.height()) / 2 + "px" )) ) ))

Aplicarea Flexbox

Noile funcții CSS3, cum ar fi Flexbox, devin treptat obișnuite. Tehnologia ajută la crearea de markup fără a utiliza floats, poziționare etc. Poate fi folosit și pentru centrarea elementelor. De exemplu, aplicați Flexbox elementului părinte.wrapper și centrați 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: auto; /* margine: 0 auto numai pe orizontală */ /* margine: auto 0 numai pe verticală */ ) Lorem ipsum dolor sit amet

Această regulă centrează elementul orizontal și vertical în același timp - marginea funcționează acum nu numai pentru alinierea orizontală, ci și pentru cea verticală. Și fără o lățime/înălțime cunoscută.

Resurse aferente Ajută proiectul

Adesea, în timpul aspectului, este nevoie de alinierea verticală a textului într-un bloc. Dacă acest lucru trebuie făcut într-o celulă de tabel, atunci valoarea proprietății CSS de aliniere verticală este setată.

Dar apare o întrebare rezonabilă: este posibil să faci fără un tabel, fără a supraîncărca aspectul paginii cu etichete inutile? Răspunsul este „puteți”, dar din cauza suportului slab CSS în browserul MSIE, soluția problemei va fi diferită de soluția pentru alte browsere comune.

Ca exemplu, luați în considerare următorul fragment:


div(
chenar: 1px solid #000;
inaltime: 10em;
latime: 10em;
}


Un text

și încercați să aliniați vertical textul la centrul blocului și la marginea de jos a blocului.

Rezolvarea problemei browserelor „corecte” (inclusiv MSIE

Majoritatea browserelor moderne acceptă CSS2.1, și anume valoarea tabel-celulă pentru proprietatea de afișare. Acest lucru ne oferă posibilitatea de a forța un bloc de text să apară ca o celulă de tabel și, profitând de acest lucru, să aliniem textul pe verticală:

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

div(
afisare: tabel-celula;
vertical-align: fund;
}

Internet Explorer (până la versiunea 7 inclusiv)

Puteți rezolva problema alinierii textului la marginea de jos a unui bloc în MSIE utilizând poziționarea absolută (aici vom avea nevoie de un element șir imbricat în bloc):

div(
poziție: relativă;
}
div span(
afisare: bloc;
poziție: absolută;
jos: 0%;
stânga: 0%;
latime: 100%;
}

Acest set de reguli funcționează și în browserele „corecte”.

Specificați proprietăți

Div span(
afisare: bloc;
latime: 100%;
}

nu sunt necesare, dar pot fi necesare dacă, pe lângă alinierea verticală a textului, intenționați să utilizați și alinierea orizontală, de exemplu, text-align: center ;.

Pentru a alinia vertical textul la centrul blocului, fragmentul original va trebui totuși să fie complicat - vom introduce un alt element de linie:

Material de studiat:

  • Centrare verticală în CSS (www.jakpsatweb.cz/css/css-vertical-center-solution.html)
  • Centrare verticală folosind CSS (www.student.oulu.fi/%7Elaurirai/www/css/middle/)
  • Aliniere verticală (www.cssplay.co.uk/ie/valign.html)
  • vertical-align:middle (cssing.org.ua/2005/07/14/vertical-align-middle/)
  • O altă metodă de aliniere verticală în CSS (cssing.org.ua/2007/04/26/another-css-valign-method)
  • 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, pentru alinierea verticală există o proprietate specială de aliniere verticală în CSS cu mai multe valori. 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 sunt cunoscute. Să adăugăm afișajul regulii: bloc inline la elementul interior și aliniere text: centru și aliniere verticală: mijloc la elementul exterior.

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

    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; culoarea fundalului: #ffc; ) .intern ( afișare: bloc inline; lățime: 100 px; înălțime: 100 px; culoarea fundalului : #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? Ideea este că proprietatea vertical-align afectează alinierea elementului în sine, nu conținutul acestuia (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 indentări Dacă înălțimile blocurilor interioare și exterioare sunt cunoscute, atunci alinierea poate fi setată 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 cu î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 înălțime linie ș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, de asemenea, utilizată 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șarea: inline-block și vertical-align: reguli de mijloc.

    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 prin „întindere” Această metodă poate fi utilizată atunci când înălțimea blocului exterior este necunoscută, dar este cunoscută înălțimea blocului interior.

    Pentru a face acest lucru aveți nevoie de:

  • setați poziționarea relativă față de blocul extern și poziționarea absolută față de blocul intern;
  • 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;
  • 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.

    Alinierea folosind margine-top negativ 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 folosind transform Această metodă este similară cu cea anterioară, dar poate fi folosită atunci când înălțimea blocului interior 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 utilizată dacă unitatea interioară are poziționare absolută.

    Alinierea cu Flexbox Cel mai modern mod de aliniere verticală este utilizarea Flexible Box Layout (cunoscută în mod popular ca 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 pentru a afișa: flex și blocul interior la margine: auto . Și e 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 vertical textul, 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.

    Astăzi, dragă cititor, ne vom ocupa de problema alinierii verticale într-un bloc div.

    Cel mai probabil, știți deja despre existența minunatei proprietăți CSS vertical-align. Și Dumnezeu însuși ne-a ordonat să folosim tocmai această proprietate pentru alinierea verticală (nu degeaba are un nume atât de explicit).

    Declarația problemei: Este necesar să se alinieze conținutul unui bloc cu înălțime variabilă centrat față de verticală.

    Acum să începem să rezolvăm problema.

    Și așa, avem un bloc, înălțimea lui se poate schimba:

    Blocați conținutul

    Primul lucru care vă vine în minte este să faceți următoarea simulare:

    Blocați conținutul

    Există toate motivele să credem că fraza Blocați conținutul va fi aliniat la înălțimea centrală a 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 problema: proprietatea vertical-align poate fi folosit numai 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 interiorul unei celule de tabel, cred că totul este clar. Dar voi explica un alt caz cu elemente inline.

    Alinierea verticală a elementelor inline

    Să presupunem că aveți o linie de text care este împărțită de etichete de linie în părți:

    Un text vă urează bun venit!

    O etichetă inline este un container al cărui aspect nu face ca conținutul să se încadreze într-o nouă linie.

    Acțiunea etichetei bloc face ca conținutul containerului să se înfășoare la o nouă linie.

    este o etichetă de bloc. Dacă închidem bucăți de text în blocuri , atunci fiecare dintre ei va fi pe o linie nouă. Folosind eticheta , care, spre deosebire de , este litere mici, containerele nu vor fi mutate pe o linie nouă, toate containerele va rămâne pe aceeași linie.

    Container convenabil de utilizat atunci când specificați o parte a textului cu formatare specială (evidențierea acesteia cu o culoare, un font diferit etc.)

    Pentru containere Aplicați următoarele proprietăți CSS:

    #perviy( vertical-align:sub; ) #vtoroy( vertical-align:3px; ) #tretiy( vertical-align:-3px; )

    Linia de text rezultată va arăta astfel:

    Aceasta nu este altceva decât alinierea verticală a elementelor inline, iar proprietatea CSS vertical-align face față perfect acestei sarcini.

    Ne-am distras puțin, acum ne întoarcem la sarcina noastră principală.

    Alinierea verticală în containerul div

    Indiferent de ce, vom folosi proprietatea vertical-align pentru alinierea în containerul div. 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 este potrivită pentru noi pentru alinierea într-un container div); tot ce rămâne este să folosim faptul că vertical-align funcționează pentru celulele de tabel.

    Cum putem folosi asta? Nu avem o masă, lucrăm cu un container div.

    Ha, se dovedește a fi foarte simplu.

    Proprietatea de afișare CSS ne permite să transformăm blocul nostru div într-o celulă de tabel, acest lucru se poate face ușor și natural:

    Să presupunem că avem o clasă div aliniere text:

    Blocați conținutul

    Pentru acest bloc specificăm următoarea proprietate CSS:

    Textalign(afisare: tabel-celula; )

    Această instrucțiune CSS va transforma în mod miraculos div-ul nostru într-o celulă de tabel, fără a o schimba vizual în vreun fel. Și pentru o celulă de tabel putem aplica proprietatea vertical-align complet și alinierea verticală dorită va funcționa.

    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ă citiți tabelul care ilustrează funcționalitatea acestei proprietăți CSS în diferite browsere de pe site-ul web htmlbook.ru). Prin urmare, va trebui să recurgem la diverse trucuri.

    Există multe modalități de a realiza alinierea într-un container div pentru toate browserele:

    • Metodă folosind un container auxiliar suplimentar div
    • Metoda folosind expresia. Este legat de un calcul dificil al înălțimii blocurilor. Nu puteți face acest lucru fără cunoștințe de JavaScript.
    • Folosind proprietatea line-height. Această metodă este potrivită numai pentru alinierea verticală într-un bloc de înălțime cunoscută și, prin urmare, nu este aplicabilă în cazul general.
    • Utilizarea decalajului de conținut absolut și relativ în cazul browserului IE. Această metodă mi se pare cea mai înțeleasă și simplă. În plus, este implementabil pentru un container div cu înălțime variabilă. Ne vom opri asupra ei mai detaliat.

    După cum înțelegeți, trebuie doar 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 un comentariu condiționat special pentru browserele din familia IE, vom indica alte proprietăți CSS.

    Comentariu condiționat

    Tip constructie:

    ... Instrucțiuni care se aplică numai dacă condiția dintre paranteze drepte este adevărată...

    se numește comentariu condiționat (atenție, tipul de comentariu condiționat trebuie să corespundă complet exemplului dat, până la un spațiu).

    Instrucțiunile conținute într-un astfel de comentariu condiționat vor fi executate numai 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ă furnizăm codului nostru HTML 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 de containere div aliniere text Proprietățile CSS sunt setate 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 pe verticală, în toate browserele, cu excepția IE.

    Acum începem să adăugăm proprietăți legate de aliniere pentru browserele din familia IE (pentru acestea 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 să indicați mai întâi numele clasei și apoi, separate printr-un spațiu, eticheta la care accesăm.

    Textalign div( poziție: absolut; sus: 50%; )

    Acest design înseamnă: pentru toate etichetele div din interiorul unui bloc cu o clasă aliniere text aplicați proprietățile enumerate.

    În consecință, stilurile specificate pentru bloc aliniere text sunt modificate:

    Aliniere text(afișare: tabel-celulă; aliniere verticală: mijloc; lățime: 500px; înălțime: 500px; poziție: relativă; )

    Acum, punctul din stânga sus al blocului de text este mutat în jos cu 50%.

    Pentru a explica 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 blocului galben sa mutat într-adevăr cu 50% în jos, în raport cu blocul părinte (violet). Dar avem nevoie de cincizeci la sută din înălțimea blocului violet să fie centrul blocului galben, și nu punctul său din stânga sus.

    Acum eticheta va intra în joc 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 sa, față de poziția inițială. După cum înțelegeți, înălțimea blocului galben este egală cu înălțimea conținutului centrat. Iar ultima operațiune asupra containerului span a plasat conținutul nostru în mijlocul blocului violet. Ura!

    Hai să trișăm puțin

    Î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, folosind un comentariu condiționat, nu degeaba ne-am familiarizat cu el:

    .textalign div( poziție: absolut; sus: 50%; ) .textalign span( poziție: relativ; sus: -50%; )

    Există o mică problemă. Dacă conținutul centrat este prea mare, atunci acest lucru duce la consecințe neplăcute: există o înălțime suplimentară pentru derularea verticală.

    Soluția problemei: trebuie să adăugați o proprietate debordare: ascuns bloc aliniere text.

    Cunoașteți proprietatea în detaliu revărsare posibil în .

    Instrucțiunile CSS finale pentru bloc aliniere text are forma:

    Textalign( afișare: tabel-celulă; aliniere verticală: mijloc; lățime: 500px; înălțime: 500px; poziție: relativă; depășire: ascuns; chenar: 1px negru; )

    Îmi pare rău, am uitat să menționez un punct important. Dacă încercați să setați înălțimea unui bloc de clasă aliniere textîn termeni procentuali, atunci nimic nu va funcționa pentru tine.

    Centrare în bloc de înălțime variabilă

    Foarte des este nevoie de a seta î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 (dar blocul de clasă aliniere text se transformă exact într-o celulă de tabel, datorită proprietății display:table-cell).

    În acest caz, trebuie să utilizați un bloc extern pentru care este specificată proprietatea CSS display:tabelși setați deja valoarea procentuală a înălțimii pentru aceasta. Apoi blocul s-a imbricat în el, cu directiva CSS display:table-cell, va moșteni cu plăcere înălțimea blocului părinte.

    Pentru a implementa un bloc de înălțime variabilă în exemplul nostru, vom edita puțin CSS-ul:

    La clasa 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%.

    Deci 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ă; depășire: ascuns; chenar: 1px negru; )

    Tot ce rămâne este să implementezi 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 display:table-cell, atunci va moșteni înălțimea de 100% din blocul părinte aliniere text(bloc violet). Și nimic nu ne va împiedica 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 blocul div imbricat în container aliniere text.

    Textalign div( afișare: celulă-tabel; aliniere verticală: mijloc; )

    Acesta este tot trucul. Dacă doriți, puteți avea o înălțime variabilă cu conținutul centrat.

    Pentru mai multe informații despre alinierea verticală a unui bloc de înălțime variabilă, consultați .