. Și această etichetă are deja atributul " alinia„, a cărui valoare determină poziţia a acestui recipient. Există trei semnificații: „ stânga", "centru", "dreapta„. În mod implicit, este „ stânga„Cu toate acestea, cred că acest lucru nu te surprinde.

Să scriem același lucru acum cod HTML, dar folosind containere, în plus, să ne aliniem nu la centru, ci la dreapta.

După cum puteți vedea, totul funcționează. Vă sfătuiesc să modificați și valorile atributului " alinia" pentru a analiza alte tipuri de aliniere a conținutului containerului.

Un alt mod de a alinia elementele HTML- acestea sunt tabele, dar acest subiect merită o discuție separată, așa că vom vorbi despre el într-unul dintre articolele următoare.

Pentru moment, pagina ta ar trebui să arate astfel:

Titlu de nivel 1, aliniat la centru

Cu stimă, Mihail Rusakov.

P.S. Dacă vrei să afli mai multe despre HTML apoi uita-te la a mea curs gratuit cu un exemplu de creare a unui site web pe HTML:

Continuarea „săpăturilor mele CSS” a apărut idee noua, demontați altul subiect actual care priveste nivelare uniformă blocuri în lățime. În principiu, am postat deja cercetarea mea amănunțită pe blogul meu, dar întrucât comunității Habra i-a plăcut foarte mult munca mea din trecut, am decis să fac aici o scurtă prezentare generală a acestui articol, astfel încât niciun suflet Habra să nu-l rateze cu siguranță. Deci, așa cum a spus Gagarin: „Hai să mergem”.

În general, în sarcinile de layout, apar periodic momente când devine necesară alinierea unei liste la lățimea ecranului. În acest caz, elementele din această listă ar trebui să fie aliniate uniform, apăsând elementele lor exterioare pe marginile containerului, iar distanța dintre ele ar trebui să fie aceeași.

Figura arată că punctele sunt aliniate în lățime, adiacente pereților laterali și fac adâncituri egale între ele.

Cum functioneaza?

În esență, trebuie să obținem ceea ce text-align: justify face textului. Deoarece comportamentul blocurilor noastre este foarte similar cu rezultatul alinierii cuvintelor într-o linie folosind această proprietate particulară. Cred că mulți oameni au deja o idee aproximativă despre ce este această proprietate și cum funcționează.

* În această recenzie, nu am postat o analiză a etapelor întregului algoritm, puteți citi despre acest lucru în articolul în sine. Principalul lucru este că înțelegeți esența.

Sarcina noastră

Sarcina noastră este să construim o soluție bazată pe acest algoritm. Aplicați, simulați, înlocuiți, faceți ce doriți, principalul lucru este să obținem ceea ce ne dorim până la urmă. Și anume, elemente aliniate uniform într-o linie, ale căror laterale sunt presate pe marginile lor. Și, desigur, distanțele (spațiile) dintre aceste elemente trebuie să fie absolut aceleași pentru orice lățime a containerului.

* Aș dori să vă informez imediat că au existat de fapt 4 opțiuni (funcționează și nu atât), plus o grămadă de nuanțe interesante și utile, articol imens(in stilul meu). Prin urmare, aici voi descrie pe scurt câteva dintre ele :)

Opțiuni 3

Dar a treia opțiune este deja construită pe text-align: justificați algoritmul în sine și blocurile inline, care au dat roade, dar nu în totalitate. În primul rând, a trebuit să diluez lista cu extra, element suplimentar, și în al doilea rând, în IE6-7 au descoperit Fapte interesante, ceea ce mi-a făcut mare plăcere să scotocesc. În aceste browsere această decizie a refuzat deloc să lucreze. Și ghici cine mi-a venit în ajutor. Așa este, SelenIT2! Dar nu a venit singur, ci cu o idee grozavă (pe care a furat-o cu nebunie de la colegul nostru comun de la GreatRash), de la care am fost pur și simplu șocat. După cum se dovedește, câteva proprietăți magice CSS3 din cele mai vechi timpuri pot transforma această soluție într-o soluție cross-browser și pot face text-align: justificați munca în vechiul nostru IE6-7.

Întregul secret era în ultima linie a următorului cod:
ul ( font: 14px Verdana, Geneva, sans-serif; text-align: justify; /* Zero pentru părinte*/ line-height: 0; font-size: 1px; /* 1px pentru Opera */ /* Cure for IE6 -7*/ text-justify: ziar )
După cum puteți vedea, folosind text-justify: ziar; la ul opțiunea noastră devine cross-browser. Acest lucru se datorează faptului că proprietatea text-justify: ziar are scopul de a mări sau micșora distanța dintre litere și dintre cuvinte. MSDN susține că acest lucru este „Cea mai sofisticată formă de aliniere pentru alfabetul latin”, dar în acest articol există și o adăugare că, pentru textele arabe, această proprietate extinde literele în sine.

Opțiuni 4

Ei bine, opțiunea 4 a fost o respingere a markupurilor suplimentare, ceea ce a dus la noi probleme în IE6-7.


Se pare că ideea este aceea de a justifica textul: ziarul face posibilă doar întinderea literelor noastre (inline-block), dar nu și comanda. Mai simplu spus, îi spune unui șir cum ar dori să fie întins și text-align: justify este forța de întindere. Acestea. text-align: justify este responsabil pentru întinderea liniei, iar text-justify: newspaper specifică doar cum va avea loc exact această întindere.

În revizuirea opțiunii a 3-a, am spus că SelenIT2 mi-a sugerat două proprietăți, dintre care una (text-justify: ziar) ne-a ajutat în varianta anterioară, iar cealaltă ne-a ajutat în aceasta! Mai mult, de această dată s-au unit și cu dublă forță au reușit să învingă ultima variantă.
ul ( font: 14px Verdana, Geneva, sans-serif; text-align: justify; /* Zero pentru părinte*/ line-height: 0; font-size: 1px; /* 1px pentru Opera */ /* Cure for IE6 -7*/ text-justify: ziar:1 /* Include ultima linie în lucrare */ text-align-last: justify;
Intalneste-ne! text-align-last- o proprietate care activează algoritmul text-align: justify în ultima linie de text, dacă același text-align: justify este aplicat acestuia. Mai simplu spus, atunci când aplicăm text-align obișnuit: justify la text, atunci, văzând asta, text-align-last îi spune primului că face ceva rău și că acum va trebui să lucreze și la ultima linie.

Apropo, aceste proprietăți sunt specificate, și nu un fel de chestii proprietare (cu excepția ziarul de valoare, care acum este numit diferit). Deci nici un pisoi nu va suferi) Și vreau să subliniez că bug-ul IE6-7 a fost depășit folosind CSS3 - cine a mai văzut asta? :)

În general, pentru a rezuma recenzia, aș dori să spun că mă bucur că am reușit să găsesc o soluție cu adevărat demnă. Și nu este ușor de găsit, ci să înțelegi totul și să-l aduci la compatibilitate absolută între browsere, folosind un minim de cod și fără a înfunda marcajul.

Dacă prezentare scurta Dacă nu a fost suficient pentru unii, recomand să citești acest articol (deja mare) cu un debriefing amănunțit. Dar, te avertizez! Articolul nu este într-adevăr mic, așa că înainte de a începe să citiți, este mai bine să vă aprovizionați cu prăjiturile și ceaiul preferat :)

Etichete: Adăugați etichete

Html există un parametru universal și se numește ALIGN. Poate fi folosit cu diverse etichete html:

p | h1 | div | masa | capul | tbody | tfoot | tr | a | td

Valori posibile:

Centru- alinierea la centru
Stânga- alinierea la stânga
Dreapta- pe dreapta
Justifica- în lățime, de-a lungul marginilor din stânga și din dreapta. În acest caz, pot apărea decalaje mari între cuvinte.

Textul este aliniat în lățime

Aspect în browser:

Titlul este centrat

Textul este aliniat în lățime. Textul este aliniat în lățime. Textul este aliniat în lățime. Textul este aliniat în lățime. Textul este aliniat în lățime. Textul este aliniat în lățime. Textul este aliniat în lățime. Textul este aliniat în lățime. Textul este aliniat în lățime. Textul este aliniat în lățime. Textul este aliniat în lățime. Textul este aliniat în lățime.

Conținutul acestui bloc este aliniat în partea dreaptă

Vă rugăm să rețineți că alinierea la stânga are loc automat. Prin urmare, nu este nevoie să specificați o astfel de valoare pentru parametrul de aliniere.

text CSS reprezintă un set de proprietăți pentru formatarea conținutului text al paginilor web. Folosirea stilurilor CSS pentru a formata textul vă permite să dați elementelor HTML aspectul dorit, astfel încât etichetele HTML să poată fi utilizate numai în scopul lor - pentru a defini structura documentului.

Despre proprietățile textului adăugate la specificație CSS3- text-overflow, word-break, word-wrap, poate fi citit.

Formatarea textului în CSS

1. Alinierea orizontală a textului

Proprietatea aliniază liniile de text din interiorul unui bloc în lățime în raport cu marginile acestuia. Se aplică numai elementelor la nivel de bloc, cum ar fi paragrafele. Mostenit.

Valori:
stânga	Aliniați la marginea din stânga a elementului. Valoare implicită pentru limbile care citesc de la stânga la dreapta.
dreapta	Aliniați la marginea dreaptă a elementului.
centru	Element Center Align controlează mai degrabă alinierea conținutului decât elementele în sine. Centrează fiecare linie de text într-un element.
justifica	Aliniați la lățimea elementului. În textul justificat, ambele capete ale liniei sunt apăsate pe marginile din stânga și din dreapta element părinte. Spațiile dintre cuvinte și litere sunt distribuite astfel încât lungimea tuturor liniilor să fie egală. Browsere diferite poate crește atât spațiul dintre cuvinte, cât și distanța dintre litere.
iniţială
moşteni

Sintaxă

P (alinierea textului: stânga;) p (alinierea textului: dreapta;) p (alinierea textului: centru;) p (alinierea textului: justificarea;)
Orez. 1. Proprietatea text-align

2. Text-indentare

Setează indentarea (padding) la prima linie a unui element, creând iluzia unui text structurat. Se aplică oricărui element de bloc, valoarea implicită este 0. Dacă este pe prima linie element bloc există o imagine, aceasta se va mișca împreună cu restul textului. Mostenit.

Sintaxă

P (indentare text: 5px;) p (indentare text: 2%;)
Orez. 2. Proprietatea text-indent

3. Linie-înălțime

Orez. 3. Recipient de sfoară

Proprietatea specifică distanța dintre liniile de bază ale liniilor de text, determinând cantitatea cu care înălțimea blocului fiecărui element este mărită sau micșorată. Controlează distanța dintre linii − distanta suplimentaraîntre rândurile de deasupra și dedesubtul textului. A determina spațiere între linii, trebuie să găsiți diferența dintre înălțimea liniei și dimensiunea fontului, împărțiți diferența la două și adăugați fiecare jumătate în zona de conținut de mai sus și de dedesubt. Acceptă numai valori pozitive. Spația dintre linii standard este echivalentă cu 120%.

Dacă înălțimea liniei și înălțimea sunt egale, aliniază textul în înălțime. Mostenit.

Sintaxă

H1 (înălțimea liniei: 20px;) h1 (înălțimea liniei: 200%;) h1 (înălțimea liniei: 1,2;) h1 (înălțimea liniei: normal;)
Orez. 4. Exemplu de afișare sensuri diferite spațiere între linii

4. Aliniere verticală vertical-align

Se aplică numai elementelor inline, imaginilor și câmpurilor de formular. Nu aliniază conținutul unui element bloc. Nu moștenit.

vertical-align
Valori:
de bază	Aliniază linia de bază a unui element cu linia de bază a părintelui său, aliniind linia centrală a elementului cu linia mediană element părinte.
sub	Face indicele elementului (similar cu eticheta ). Suma de retrogradare a unui element poate varia în funcție de browserul utilizatorului.
super	Face ca elementul superscript (similar cu eticheta ). Cu toate acestea, valorile sup și super nu modifică dimensiunea fontului în mod implicit, textul elementelor superscript și indicele are aceeași dimensiune ca și textul elementului părinte.
top	Marginea superioară a elementului este aliniată cu Marginea superioară cel mai înalt element din linie.
text-top	Marginea superioară a elementului se aliniază cu marginea superioară a fontului elementului părinte.
mijloc	Linia mediană a unui element (de obicei o imagine) este aliniată cu o linie prin mijlocul elementului părinte.
fund	Marginea de jos a elementului este aliniată cu marginea de jos a elementului cel mai de jos din linie.
text-de jos	Marginea de jos a elementului se aliniază cu marginea de jos a fontului elementului părinte.
lungime	Setează o valoare în unități de lungime, deplasând elementul la o distanță specificată.
%	Nu permite setarea mijlocului, este calculată ca parte a înălțimii liniei a elementului, nu a părintelui său, de exemplu. Dacă setați alinierea verticală la 50% pentru un element cu înălțimea liniei de 20 px, linia de bază a elementului va crește cu 10 px.
iniţială	Setează valoarea proprietății la valoarea implicită.
moşteni	Moștenește valoarea proprietății de la elementul părinte.

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 utilizând „ umplutura".

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

.example-wrapper1 ( fundal : #535E73 ; lățime : 200 px ; înălțime : 200 px ; umplutură : 20 px 50 px ; )

Alinierea blocurilor poziționate absolut

Dacă blocul este setat la " poziție: absolută", apoi poate fi poziționat relativ la cel mai apropiat părinte cu „poziție: relativă". Aceasta necesită toate proprietățile (" top","dreapta","fund","stânga") Unitate interioară atribuiți aceeași valoare precum și „marjă: auto”.

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

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

Aliniere orizontala

Alinierea folosind „text-align: center”

Pentru a alinia textul într-un bloc există proprietate specială "aliniere text". 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, link-urilor sau imaginilor.

Odată a trebuit să inventez text pentru a arăta cum funcționează alinierea textului când Ajutor CSS, dar nu mi-a venit nimic interesant în minte. La început am decis să copiez o rimă pentru copii undeva, dar mi-am amintit că asta 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("afișare: în linie").

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

Alinierea blocurilor 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 abrevierea: „ marja: 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 ; )

Acesta este modul în care ar trebui să aliniați toate blocurile, acolo unde este posibil (unde este fix sau poziționare absolută) - el este cel mai logic și mai 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ă

CU aliniere verticală mult mai multe probleme- 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 line-height

În cazul în care există o singură linie într-un bloc, puteți obține alinierea verticală a acestuia folosind butonul " inaltimea liniei" și setați-l la înălțimea dorită. Pentru fiabilitate, merită să setați și "înălțimea", a cărei valoare va fi egală cu valoarea "line-height", 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 ; vertical-align : fundal : #FFFAF2 ;

Blocul de înveliș trebuie să aibă setat „dimensiunea fontului: 0”. Dacă nu este instalat dimensiune zero font, 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

proprietate " vertical-align" afectează și celulele tabelului. C valoarea stabilită„de mijloc”, conținutul din interiorul celulei este aliniat la centru. Desigur, aspectul tabelar este acum considerat arhaic, dar în cazuri excepționale îl puteți simula prin specificarea „ afișare: tabel-celulă".

De obicei folosesc această opțiune pentru alinierea verticală. Mai jos este un exemplu de aspect preluat 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 ;

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: mijloc„. În plus, toate elementele cu „ display: inline„care sunt pe aceeași linie se vor alinia cu o linie centrală comună.

Trebuie să creați un bloc auxiliar cu o înălțime înălțime egală blocul părinte, atunci 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 ;

Afișaj: flex și aliniere

Dacă nu-ți pasă prea mult utilizatorii Explorer 8 sau le pasă atât de mult încât sunteți gata să introduceți o bucată de javascript suplimentar pentru ei, apoi 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, despre asta am vrut să scriu Alinierea CSS. Acum centrarea conținutului nu va fi o problemă!