Alinierea la centru CSS a conținutului blocului. Aliniați DIV la centru

Vlad Merjevici

Datorită faptului că conținutul celulelor tabelului poate fi aliniat simultan pe orizontală și pe verticală, posibilitățile de control al poziției elementelor unul față de celălalt sunt extinse. Tabelele vă permit să setați alinierea imaginilor, textului, câmpurilor de formular și a altor elemente unul față de celălalt și cu pagina web în ansamblu. În general, alinierea este necesară în principal pentru a stabili conexiuni vizuale între diferite elemente, precum și pentru a le grupa.

Centrare pe verticală

O modalitate de a arăta vizitatorului focalizarea și numele site-ului este utilizarea unei pagini de start. Aceasta este prima pagină pe care, de regulă, există un ecran de splash flash sau o imagine care exprimă ideea principală a site-ului. Imaginea este, de asemenea, un link către alte secțiuni ale site-ului. Trebuie să plasați această imagine în centrul ferestrei browserului, indiferent de rezoluția monitorului. În acest scop, puteți utiliza un tabel cu lățimea și înălțimea de 100% (exemplul 1).

Exemplul 1: Centrarea desenului

Aliniere TABLE ( lățime: 100%; /* Lățime tabel */ înălțime: 100%; /* Înălțime tabel */ )

În acest exemplu, alinierea orizontală este setată utilizând parametrul etichetei align="center". , iar conținutul celulei poate să nu fie centrat vertical, deoarece aceasta este poziția implicită.

Pentru a seta înălțimea mesei la 100%, trebuie să eliminați , codul nu va mai fi valabil.

Utilizarea lățimii și înălțimii pentru a acoperi întreaga zonă disponibilă a paginii web asigură că conținutul tabelului va fi aliniat exact în centrul ferestrei browserului, indiferent de dimensiunea acestuia.

Aliniere orizontala

Prin combinarea atributelor align (aliniere orizontală) și valign (aliniere verticală) ale etichetei , este permisă setarea mai multor tipuri de poziții ale elementelor unul față de celălalt. În fig. Figura 1 prezintă modalități de aliniere orizontală a elementelor.

Să ne uităm la câteva exemple de aliniere a textului conform figurii de mai jos.

Alinierea de sus

Pentru a specifica alinierea superioară a conținutului celulei, pentru o etichetă trebuie să setați atributul valign cu valoarea de sus (exemplul 2).

Exemplul 2: Utilizarea valign

Aliniere

Coloana 1

Coloana 2

În acest exemplu, caracteristicile celulei sunt controlate folosind parametrii etichetei , dar este și mai convenabil să schimbați prin stiluri. În special, alinierea în celule este specificată de proprietățile vertical-align și text-align (exemplul 3).

Exemplul 3: aplicarea stilurilor pentru aliniere

Aliniere TABLE ( lățime: 100%; /* Lățime tabel */ ) #col1 ( lățime: 75%; /* Lățime prima coloană */ fundal: #f0f0f0; /* Culoarea fundalului primei coloane */ ) #col2 ( lățime: 25 %; /* Lățimea celei de-a doua coloane */ fundal: #fc5; /* Culoare de fundal a celei de-a doua coloane */ text-align: right; /* Aliniere la dreapta */ ) #col1, #col2 ( vertical-align: top ; / * Alinierea superioară */ padding: 5px; /* Margini din jurul conținutului celulei */ )

Coloana 1

Coloana 2

Pentru a scurta codul, acest exemplu folosește gruparea selectoarelor, deoarece proprietățile de aliniere verticală și de umplutură sunt aplicate la două celule în același timp.

Alinierea de jos se face în același mod, dar în loc de valoarea de sus, se folosește partea de jos.

Alinierea la centru

În mod implicit, conținutul celulei este aliniat la centrul liniei lor verticale, așa că dacă coloanele au înălțimi diferite, trebuie să setați alinierea la marginea de sus. Uneori mai trebuie să părăsiți metoda de aliniere inițială, de exemplu, când plasați formule, așa cum se arată în Fig. 2.

În acest caz, formula este situată strict în centrul ferestrei browserului, iar numărul acesteia este situat pe marginea dreaptă. Pentru a aranja elementele în acest fel, veți avea nevoie de un tabel cu trei celule. Celulele exterioare ar trebui să aibă aceleași dimensiuni, în celula din mijloc alinierea este centrată, iar în celula din dreapta - de-a lungul marginii din dreapta (exemplul 4). Acest număr de celule este necesar pentru a vă asigura că formula este poziționată în centru.

Exemplul 4: Alinierea formulei

Aliniere

(18.6)

În acest exemplu, prima celulă a tabelului este lăsată goală; servește doar la crearea unei indentări, care, apropo, poate fi setată și folosind stiluri.

Alinierea elementelor de formular

Folosind tabele, este convenabil să determinați poziția câmpurilor de formular, mai ales atunci când acestea sunt intercalate cu text. Una dintre opțiunile de proiectare pentru formular, care este destinată introducerii unui comentariu, este prezentată în Fig. 3.

Pentru a vă asigura că textul de lângă câmpurile formularului este aliniat la dreapta și elementele formularului în sine sunt aliniate la stânga, veți avea nevoie de un tabel cu un chenar invizibil și două coloane. Coloana din stânga va conține textul în sine, iar coloana din dreapta va conține câmpuri de text (exemplul 5).

Exemplul 5: Alinierea câmpurilor de formular

Aliniere

Nume
E-mail
Un comentariu

În acest exemplu, pentru acele celule în care este necesară alinierea corectă, este adăugat atributul align="right". Pentru a vă asigura că eticheta Comentariu este poziționată în partea de sus a textului cu mai multe linii, celula corespunzătoare este setată la alinierea sus folosind atributul valign.

Fiecare designer de layout se confruntă în mod constant cu nevoia de a alinia conținutul într-un bloc: orizontal sau vertical. Există mai multe articole bune pe acest subiect, dar toate oferă o mulțime de opțiuni interesante, dar puține practice, motiv pentru care trebuie să aloci timp suplimentar pentru a evidenția punctele principale. Am decis să prezint aceste informații într-o formă care îmi este convenabilă, ca să nu mai caut pe google.

Alinierea blocurilor cu dimensiuni cunoscute

Cel mai simplu mod de a utiliza CSS este alinierea blocurilor care au o înălțime cunoscută (pentru alinierea verticală) sau lățime (pentru alinierea orizontală).

Alinierea folosind umplutură

Uneori nu puteți centra un element, ci îi puteți adăuga margini folosind proprietatea „padding”.

De exemplu, există o imagine de 200 x 200 pixeli și trebuie să o centrați într-un bloc de 240 x 300. Putem seta înălțimea și lățimea blocului exterior = 200px și adăugați 20 de pixeli în partea de sus și de jos , și 50 la stânga și la dreapta.

.example-wrapper1 ( fundal : #535E73 ; lățime : 200 px ; înălțime : 200 px ; padding : 20 px 50 px ; ) Aliniați blocurile poziționate absolut

Dacă un bloc este setat la „poziție: absolut”, atunci poate fi poziționat relativ la cel mai apropiat părinte cu „poziție: relativ”. Pentru a face acest lucru, trebuie să atribuiți aceeași valoare tuturor proprietăților („sus”, „dreapta”, „jos”, „stânga”) ale blocului interior, precum și „marjă: auto”.

*Există o nuanță: lățimea (înălțimea) blocului interior + valoarea stânga (dreapta, jos, sus) nu trebuie să depășească dimensiunile blocului părinte. Este mai sigur să atribuiți 0 (zero) proprietăților din stânga (dreapta, jos, sus).

.example-wrapper2 ( poziție : relativă ; înălțime : 250 px ; fundal : url(space.jpg) ; ) .cat-king ( lățime : 200 px ; înălțime : 200 px ; poziție : absolut ; sus : 0 ; stânga : 0 ; jos : 0 ; dreapta : 0 ; margine : automat ; fundal : url(king.png) ; ) Aliniere orizontală Aliniere folosind „text-align: center”

Pentru a alinia textul într-un bloc, există o proprietate specială „text-align”. Când este setată la „centru”, fiecare linie de text va fi aliniată orizontal. Pentru textul cu mai multe linii, această soluție este folosită extrem de rar; mai des această opțiune poate fi găsită pentru alinierea intervalelor, legăturilor sau imaginilor.

Odată a trebuit să vin cu ceva text pentru a arăta cum funcționează alinierea textului folosind CSS, dar nu mi-a venit în minte nimic interesant. La început m-am hotărât să copiez undeva o rimă pentru copii, dar mi-am amintit că acest lucru ar putea strica unicitatea articolului, iar dragii noștri cititori nu l-ar putea găsi pe Google. Și apoi am decis să scriu acest paragraf - la urma urmei, punctul nu este cu el, dar punctul este aliniat.

.example-text ( text-align : center ; padding : 10px ; background : #FF90B8 ; )

Este demn de remarcat faptul că această proprietate va funcționa nu numai pentru text, ci și pentru orice elemente inline ("display: inline").

Dar acest text este aliniat la stânga, dar este într-un bloc care este centrat în raport cu învelișul.

.example-wrapper3 ( text-align : center ; background : #FF90B8 ; ) .inline-text ( display : inline-block ; lățime : 40% ; padding : 10px ; text-align : stânga ; fundal : #FFE5E5 ; ) Aliniere blocuri folosind marginea

Elementele bloc cu o lățime cunoscută pot fi aliniate cu ușurință pe orizontală, setându-le la „margin-left: auto; margin-right: auto”. De obicei se folosește notația scurtă: „margin: 0 auto” (orice valoare poate fi folosită în loc de zero). Dar această metodă nu este potrivită pentru alinierea verticală.

.lama-wrapper ( înălțime : 200px ; fundal : #F1BF88 ; ) .lama1 ( înălțime : 200px ; lățime : 200px ; fundal : url(lama.jpg) ; margine : 0 auto ; )

Așa ar trebui să aliniați toate blocurile, acolo unde este posibil (unde nu este necesară poziționarea fixă sau absolută) - este cel mai logic și adecvat. Deși acest lucru pare evident, am văzut uneori exemple înfricoșătoare cu indentări negative, așa că am decis să clarific.

Aliniere verticală

Alinierea verticală este mult mai problematică - aparent, acest lucru nu a fost prevăzut în CSS. Există mai multe modalități de a obține rezultatul dorit, dar toate nu sunt foarte frumoase.

Alinierea cu proprietatea înălțimea liniei

În cazul în care există o singură linie într-un bloc, puteți obține alinierea verticală a acesteia folosind proprietatea „line-height” și setând-o la înălțimea dorită. Pentru a fi în siguranță, ar trebui să setați și „înălțimea”, a cărei valoare va fi egală cu valoarea „înălțimea liniei”, deoarece aceasta din urmă nu este acceptată în toate browserele.

.example-wrapper4 (înălțimea liniei: 100px; culoare: #DC09C0; fundal: #E5DAE1; înălțimea: 100px; alinierea textului: centru; )

De asemenea, este posibil să se realizeze alinierea blocului cu mai multe linii. Pentru a face acest lucru, va trebui să utilizați un bloc suplimentar de înveliș și să setați înălțimea liniei la acesta. Un bloc intern poate fi cu mai multe linii, dar trebuie să fie „inline”. Trebuie să-i aplicați „vertical-align: middle”.

.example-wrapper5 (înălțimea liniei: 160px; înălțimea: 160px; dimensiunea fontului: 0; fundal: #FF9B00; ) .example-wrapper5 .text1 (afișare: bloc inline; dimensiunea fontului: 14px; înălțimea liniei: 1.5; aliniere verticală: mijloc; fundal: #FFFAF2; culoare: #FF9B00; aliniere text: centru; )

Blocul de înveliș trebuie să aibă setat „dimensiunea fontului: 0”. Dacă nu setați dimensiunea fontului la zero, browserul va adăuga câțiva pixeli în plus. De asemenea, va trebui să specificați dimensiunea fontului și înălțimea liniei pentru blocul interior, deoarece aceste proprietăți sunt moștenite de la părinte.

Alinierea verticală în tabele

Proprietatea „vertical-align” afectează și celulele tabelului. Cu valoarea setată la „mijloc”, conținutul din interiorul celulei este aliniat la centru. Desigur, aspectul tabelului este considerat arhaic în zilele noastre, dar în cazuri excepționale îl puteți simula prin specificarea „display: table-cell”.

De obicei folosesc această opțiune pentru alinierea verticală. Mai jos este un exemplu de layout luat dintr-un proiect finalizat. Poza care este centrată vertical în acest fel este cea care interesează.

.one_product .img_wrapper ( afișare : table-cell ; înălțime : 169 px ; vertical-align : middle ; overflow : ascuns ; fundal : #fff ; lățime : 255 px ; ) .one_product img ( înălțime maximă : 169 px ; lățime maximă : 100 %; lățime minimă: 140 px; afișare: bloc; marjă: 0 automat; )

Trebuie amintit că, dacă un element are un set „float” altul decât „none”, atunci va fi în orice caz bloc (afișare: bloc) - atunci va trebui să utilizați un înveliș suplimentar de bloc.

Alinierea cu un element suplimentar în linie

Și pentru elementele inline puteți folosi „vertical-align: middle”. Acest lucru va alinia toate elementele cu „display: inline” care sunt pe aceeași linie în raport cu o linie centrală comună.

Trebuie să creați un bloc auxiliar cu o înălțime egală cu înălțimea blocului părinte, apoi blocul dorit va fi centrat. Pentru a face acest lucru, este convenabil să folosiți pseudo-elementele:before sau:after.

.example-wrapper6 (înălțime: 300px; text-align: center; fundal: #70DAF1; ) .pudge (afișare: inline-block; vertical-align: middle; fundal: url(pudge.png) ; fundal-culoare: # fff ; lățime : 200 px ; înălțime : 200 px ; ) .riki ( afișare : bloc inline ; înălțime : 100 % ; aliniere verticală : mijloc ; ) Afișare: flexibilitate și aliniere

Dacă nu vă pasă foarte mult de utilizatorii Explorer 8 sau vă pasă atât de mult încât sunteți dispus să introduceți o bucată de javascript suplimentar pentru ei, atunci puteți folosi „display: flex”. Cutiile flexibile sunt excelente pentru a rezolva problemele de aliniere și scrieți doar „margin: auto” pentru a centra conținutul în interior.

Până acum, practic nu am întâlnit niciodată această metodă, dar nu există restricții speciale pentru ea.

.example-wrapper7 ( display : flex ; înălțime : 300px ; fundal : #AEB96A ; ) .example-wrapper7 img ( margine : automat ; )

Ei bine, atât am vrut să scriu despre alinierea CSS. Acum centrarea conținutului nu va fi o problemă!

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

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 dislpay: table; property. :

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 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 elementului alignCenter(elem) ( elem.css(( // se calculează coordonatele din stânga și sus din 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 orizontală */ /* margine: auto 0; doar 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

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