Alinierea la înălțime. Cum să aliniați textul în HTML la centrul, lățimea și marginile paginii

Alinierea elementelor pe orizontală și pe verticală se poate face în diferite moduri. Alegerea metodei depinde de tipul elementului (bloc sau inline), tipul poziționării acestuia, dimensiunea etc.

1. Alinierea orizontală la centrul blocului/pagina 1.1. Dacă blocul are o lățime: div ( lățime: 300px; margine: 0 auto; /*centrează elementul orizontal în blocul părinte*/ )

Dacă doriți să aliniați un element inline în acest fel, acesta trebuie să fie setat să afișeze: bloc;

1.2. Dacă un bloc este imbricat într-un alt bloc și nu are lățime/specificată: .wrapper (text-align: center;) 1.3. Dacă lățimea blocului este setată și trebuie să-l fixați în centrul blocului părinte: .wrapper (poziție: relativă; /*setează poziționarea relativă pentru blocul părinte, astfel încât apoi să putem poziționa absolut blocul în interiorul acestuia* /) .box ( lățime: 400px; poziție: absolut; stânga: 50%; margin-left: -200px; /*deplasați blocul la stânga cu o distanță egală cu jumătate din lățime*/ ) 1.4. Dacă blocurile nu au o lățime specificată, le puteți centra folosind un bloc de înveliș părinte: .wrapper (text-align: center; /*center the content of the block*/) .box ( display: inline-block; / *aranjați blocurile într-un rând orizontal*/ margin-right: -0.25em /*eliminați marginea din dreapta dintre blocuri*/ ) 2. Alinierea verticală 2.1. Dacă textul ocupă un rând, de exemplu, pentru butoane și elemente de meniu: .button ( înălțime: 50px; line-height: 50px; ) 2.2. Pentru a alinia un bloc vertical în interiorul unui bloc părinte: .wrapper (poziție: relativ;) .box (înălțime: 100px; poziție: absolut; sus: 50%; margine: -50px 0 0 0; ) 2.3. Alinierea verticală după tipul tabelului: .wrapper ( display: table; width: 100%; ) .box ( display: table-cell; height: 100px; text-align: center; vertical-align: middle; ) 2.4. Dacă unei casete i se dă o lățime și o înălțime și trebuie să fie centrată pe caseta părinte: .wrapper (poziție: relativ; ) .box (înălțime: 100px; lățime: 100px; poziție: absolut; sus: 0; dreapta: 0; jos: 0; margine: auto: auto, pentru ca conținutul să nu se extindă; Poziționare absolută în centrul paginii/blocului folosind transformarea CSS3:

dacă sunt specificate dimensiuni pentru element

div ( width: 300px; /*setează lățimea blocului*/ height:100px; /*setează înălțimea blocului*/ transform: translate(-50%, -50%); poziție: absolut; top: 50 %; stânga: 50% ;

dacă elementul nu are dimensiuni și nu este gol

Un text aici h1 (marja: 0; transformare: traducere(-50%, -50%); poziție: absolut; sus: 50%; stânga: 50%; )

Foarte des sarcina este de a alinia un bloc în centrul paginii/ecranului și chiar și așa, fără un script Java, fără a seta dimensiuni rigide sau indentări negative și astfel încât barele de defilare să funcționeze pentru părinte dacă blocul își depășește dimensiunea . Există destul de multe exemple monotone pe Internet despre cum să aliniați un bloc la centrul ecranului. De regulă, majoritatea se bazează pe aceleași principii.

Mai jos sunt principalele modalități de a rezolva problema, avantajele și dezavantajele lor. Pentru a înțelege esența exemplelor, vă recomand să reduceți înălțimea/lățimea ferestrei Rezultate în exemplele de la linkurile furnizate.

Opțiunea 1: indentare negativă. Poziționăm blocul cu atributele de sus și stânga la 50% și, știind în prealabil înălțimea și lățimea blocului, setăm o marjă negativă, care este egală cu jumătate din dimensiunea blocului. Un mare dezavantaj al acestei opțiuni este că trebuie să numărați indentările negative. De asemenea, blocul nu se comportă corect atunci când este înconjurat de bare de defilare - este pur și simplu tăiat deoarece are margini negative.

Părinte ( lățime: 100%; înălțime: 100%; poziție: absolut; sus: 0; stânga: 0; overflow: automat; ) .block ( lățime: 250px; înălțime: 250px; poziție: absolut; sus: 50%; stânga : 50%; margine: -125px 0 0 -125px img (lățime maximă: 100%; înălțime: automată; afișare: bloc; margine: 0 auto; margine: niciuna; ) )

Opțiunea 2. Indentare automată. Mai puțin obișnuit, dar similar cu primul. Pentru bloc, setăm lățimea și înălțimea, poziționăm atributele sus dreapta jos stânga la 0 și setăm marginea automată. Avantajul acestei opțiuni este să lucreze barele de defilare pe părinte, dacă acesta din urmă are setate 100% lățime și înălțime. Dezavantajul acestei metode este setarea rigidă a dimensiunilor.

Părinte ( lățime: 100%; înălțime: 100%; poziție: absolut; sus: 0; stânga: 0; overflow: automat; ) .block ( lățime: 250px; înălțime: 250px; poziție: absolut; sus: 0; dreapta: 0; jos: 0; margine: auto; înălțime: auto; margine: auto;

Opțiunea 3. Tabel. Setăm stiluri de tabel pentru părinte și setăm alinierea textului în centru pentru celula părinte. Și dăm blocului un model de bloc de linie. Dezavantajele pe care le primim sunt barele de defilare care nu funcționează și, în general, estetica „emulației” mesei nu este.

Părinte ( lățime: 100%; înălțime: 100%; afișare: tabel; poziție: absolut; sus: 0; stânga: 0; > .interior ( afișare: tabel-celulă; text-align: center; vertical-align: middle; ) ) .bloc ( display: inline-block; img ( display: block; border: none; ) )

Pentru a adăuga un scroll la acest exemplu, va trebui să adăugați încă un element la design.
Exemplu: jsfiddle.net/serdidg/fk5nqh52/3.

Opțiunea 4. Pseudo-element. Această opțiune este lipsită de toate problemele enumerate în metodele anterioare și, de asemenea, rezolvă problemele originale. Ideea este să stilați pseudo-elementul de dinainte pe părinte, și anume 100% înălțime, alinierea la centru și modelul blocului în linie. În același mod, blocul în sine este setat la un model de bloc de linie, aliniat la centru. Pentru a preveni ca blocul să „cade” sub pseudo-element atunci când dimensiunea primului este mai mare decât părintele său, indicăm părintelui spațiu alb: nowrap și font-size: 0, după care anulăm aceste stiluri pentru blocul cu următorul - spatiu alb: normal. În acest exemplu, font-size: 0 este necesar pentru a elimina spațiul rezultat dintre părinte și bloc din cauza formatării codului. Spațiul poate fi îndepărtat în alte moduri, dar este considerat cel mai bine să îl evitați pur și simplu.

Părinte ( lățime: 100%; înălțime: 100%; poziție: absolut; sus: 0; stânga: 0; overflow: automat; spații albe: nowrap; text-align: center; font-size: 0; &:before ( înălțime: 100%;

Sau, dacă aveți nevoie ca părintele să ocupe doar înălțimea și lățimea ferestrei, și nu întreaga pagină:

Părinte ( poziție: fix; sus: 0; dreapta: 0; jos: 0; stânga: 0; overflow: automat; spații albe: nowrap; text-align: center; font-size: 0; &:before ( înălțime: 100%;

Opțiunea 5. Flexbox. Una dintre cele mai simple și mai elegante moduri este utilizarea flexbox. Nu necesită mișcări inutile ale corpului, descrie destul de clar esența a ceea ce se întâmplă și este foarte flexibil. Singurul lucru care merită reținut atunci când alegeți această metodă este suportul pentru IE de la versiunea 10 inclusiv. caniuse.com/#feat=flexbox

Părinte ( lățime: 100%; înălțime: 100%; poziție: fix; sus: 0; stânga: 0; afișare: flex; align-items: center; align-content: centru; justify-content: centru; overflow: automat; ) .bloc ( fundal: #60a839; img ( afișare: bloc; chenar: niciunul; ) )

Opțiunea 6. Transform. Potrivit dacă suntem limitați de structură și nu există nicio modalitate de a manipula elementul părinte, dar blocul trebuie aliniat cumva. Funcția css translate() va veni în ajutor. O valoare de 50% poziționare absolută va poziționa colțul din stânga sus al blocului exact în centru, apoi o valoare de translație negativă va muta blocul în raport cu propriile dimensiuni. Vă rugăm să rețineți că efectele negative pot apărea sub formă de margini neclare sau stil de font. De asemenea, această metodă poate duce la probleme cu calcularea poziției blocului folosind java-script Uneori, pentru a compensa pierderea de 50% din lățimea din cauza utilizării proprietății CSS stânga, regula specificată pentru bloc. ajutor: margine-dreapta: -50% .

Părinte ( lățime: 100%; înălțime: 100%; poziție: fix; sus: 0; stânga: 0; overflow: automat; ) .block (poziție: absolut; sus: 50%; stânga: 50%; transform: translate( -50%, -50%) img ( display: block; ) )

Opțiunea 7. Buton. Opțiune de utilizator, în cazul în care blocul este încadrat într-o etichetă de buton. Butonul are proprietatea de a centra tot ce se afla in interiorul lui, si anume elementele modelului inline si block-line (inline-block). În practică, nu recomand să-l folosești.

Părinte ( lățime: 100%; înălțime: 100%; poziție: absolut; sus: 0; stânga: 0; overflow: automat; fundal: niciunul; chenar: niciunul; contur: niciunul; ) .block ( afișare: bloc inline; img (afișare: bloc;; chenar: niciunul; ) )

Bonus Folosind ideea celei de-a patra opțiuni, puteți seta margini externe pentru bloc și, în același timp, acestea din urmă vor fi afișate adecvat înconjurate de bare de defilare.
Exemplu: jsfiddle.net/serdidg/nfqg9rza/2.

De asemenea, puteți alinia imaginea la centru și, dacă imaginea este mai mare decât cea părinte, scalați-o la dimensiunea părintelui.
Exemplu: jsfiddle.net/serdidg/nfqg9rza/3.
Exemplu cu o imagine mare:

Alinierea textului pe verticală în CSS este o treabă destul de dificilă. Am văzut destui oameni care se luptă cu asta încât să găsesc în mod constant erori „critice” atunci când vine vorba de design responsive real.

Dar nu vă temeți: dacă vă luptați deja cu alinierea verticală CSS, ați ajuns la locul potrivit.

Să vorbim despre proprietatea de aliniere verticală CSS

Când am început să lucrez în dezvoltarea web, m-am luptat puțin cu această proprietate. M-am gândit că ar trebui să funcționeze ca proprietatea clasică „text-align”. Oh, dacă totul ar fi atât de simplu...

Proprietatea CSS de aliniere verticală funcționează bine cu tabelele, dar nu și cu div-urile sau alte elemente. Când îl utilizați pe un div, acesta aliniază elementul în raport cu alte div-uri, dar nu și conținutul său. În acest caz, proprietatea funcționează numai cu afișarea: inline-block; .

Vezi exemplu

Vrem să concentrăm conținutul, nu div-ul în sine!

Aveți două opțiuni. Dacă aveți doar elemente div cu text, atunci puteți utiliza proprietatea line-height. Aceasta înseamnă că trebuie să cunoașteți înălțimea elementului, dar nu o puteți seta. În acest fel, textul tău va fi întotdeauna în centru.

Există totuși un dezavantaj al acestei abordări de aliniere verticală CSS. Dacă textul are mai multe linii, atunci înălțimea liniei va fi înmulțită cu numărul de linii. Cel mai probabil, în acest caz, vei ajunge cu o pagină teribil de aranjată.

Aruncă o privire la acest exemplu

Dacă conținutul pe care doriți să îl centrați constă din mai multe rânduri, atunci este mai bine să utilizați div-urile de tabel. Puteți folosi și tabele, dar acest lucru nu este corect din punct de vedere semantic. Dacă aveți nevoie de pauze în scopuri receptive, este mai bine să utilizați elemente div.

Pentru ca acest lucru să funcționeze, trebuie să existe un container părinte cu display: table și în interiorul acestuia numărul dorit de coloane pe care doriți să le centrați folosind display: table-cell și vertical-align: middle .

Vezi exemplu

De ce funcționează acest lucru cu marcajul tabelului, dar nu cu elementele div? Pentru că rândurile din tabel au aceeași înălțime. Atunci când conținutul unei celule de tabel nu folosește tot spațiul disponibil în înălțime, browserul adaugă automat umplutură verticală pentru a centra conținutul.

proprietatea poziției

Să începem cu elementele de bază ale alinierii verticale CSS div:

poziție: static este implicit. Elementul este redat conform ordinii HTML;
poziție: absolută - folosită pentru a determina poziția exactă a unui element. Această poziție este întotdeauna legată de cel mai apropiat element părinte poziționat relativ (nu static). Dacă nu determinați poziția exactă a unui element, veți pierde controlul asupra acestuia. Va apărea aleatoriu, ignorând complet fluxul documentului. Implicit, elementul apare în colțul din stânga sus;
poziție: relativă - folosită pentru a poziționa un element față de poziția sa normală (statică). Această valoare păstrează ordinea fluxului de documente;
poziție: fixă - folosită pentru a poziționa elementul în raport cu fereastra browserului, astfel încât să fie întotdeauna vizibil în fereastra de vizualizare.

Notă: Unele proprietăți (sus și indexul z) funcționează numai dacă elementul este setat pe poziție (nu static).

Să trecem la treabă!

Doriți să implementați alinierea centrală verticală CSS? Mai întâi creați un element cu poziție și dimensiuni relative. De exemplu: 100% în lățime și înălțime.

Al doilea pas poate varia în funcție de browserele țintă, dar puteți utiliza una dintre cele două opțiuni:

Proprietate veche: trebuie să cunoașteți dimensiunea exactă a ferestrei pentru a elimina jumătate din lățime și jumătate din înălțime. Uită-te la exemplu;
Noua proprietate CSS3: puteți adăuga o proprietate de transformare cu o valoare de translație de 50%, iar blocul va fi întotdeauna în centru. Vezi exemplu.

Practic, dacă doriți să centrați conținutul, nu utilizați niciodată partea de sus: 40% sau stânga: 300px . Acest lucru funcționează bine pe ecranele de testare, dar nu este centrat.

Amintiți-vă poziția: fix? Puteți face același lucru cu el ca și cu o poziție absolută, dar nu aveți nevoie de o poziție relativă pentru elementul părinte - acesta va fi întotdeauna poziționat relativ la fereastra browserului.

Ați auzit de specificația flexbox?

Puteți folosi flexbox. Aceasta este mult mai bună decât orice altă opțiune de aliniere verticală a textului în centru CSS. Cu flexbox, gestionarea elementelor este ca o joacă de copii. Problema este că unele browsere trebuie să fie eliminate, cum ar fi IE9 și versiunile de mai jos. Iată un exemplu despre cum să centrați vertical un bloc:

Vezi exemplu

Folosind un aspect flexbox, puteți centra mai multe blocuri.

Dacă aplicați ceea ce ați învățat din aceste exemple, veți putea stăpâni alinierea blocurilor verticale CSS în cel mai scurt timp.

Link-uri și lecturi suplimentare

Învățarea de marcare CSS

FlexBox Froggy

Cutie de nisip Flexbox

Traducerea articolului „CSS Vertical Align for Everyone (Dummies Included)” a fost pregătită de echipa prietenoasă a proiectului.

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;

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ă:

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; )

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

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 alinierea 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 flotoare, 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 orizontală */ /* margine: numai 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 verticală. Și fără o lățime/înălțime cunoscută.

Resurse aferente Ajută proiectul

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 a rezolva această problemă, 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 alinierea 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ă din urmă 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.

Alinierea 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 î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ă ce s-au echilibrat, 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 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ă.