Fiecare designer de layout se confruntă în mod constant cu nevoia de a alinia conținutul într-un bloc: orizontal sau vertical. Există câteva articole bune pe acest subiect, dar toate oferă multe opțiuni interesante, dar puține practice, motiv pentru care trebuie să aloci timp suplimentar pentru a evidenția principalul lucru. Am decis să trimit aceste informații în formularul care îmi este convenabil pentru a nu le mai căuta pe google.
Alinierea blocurilor cu dimensiuni cunoscute
Cel mai simplu mod de a utiliza CSS este alinierea blocurilor care au o înălțime predeterminată (pentru alinierea verticală) sau lățime (pentru alinierea orizontală).
Alinierea cu căptușeală
Uneori nu puteți centra un element, ci îi puteți adăuga margini cu „ căptușeală".
De exemplu, aveți o imagine de 200 x 200 pixeli și doriți să o centrați într-un bloc de 240 x 300. Putem seta înălțimea și lățimea casetei exterioare = 200px și adăugați 20px în partea de sus și de jos și 50 fiecare în stânga și în dreapta .
.example-wrapper1 (fond: # 535E73; lățime: 200px; înălțime: 200px; umplutură: 20px 50px;)Alinierea cutiilor 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 ". Pentru a face acest lucru, toate proprietățile au nevoie de (" top","dreapta","fund","stânga„) atribuie aceeași valoare unității interioare, 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ă dimensiunea blocului părinte. Este mai sigur să setați proprietățile din stânga (dreapta, jos, sus) la 0 (zero).
.example-wrapper2 (poziție: relativă; înălțime: 250px; fundal: url (spațiu.jpg);) .cat-king (lățime: 200px; înălțime: 200px; poziție: absolut; sus: 0; stânga: 0; jos: 0; dreapta: 0; margine: automat; fundal: url (king.png);)Aliniere orizontala
Aliniați cu „text-align: center”
Există o proprietate specială pentru alinierea textului într-un bloc " aliniere text". Când valoarea este setată" centru„fiecare linie de text va fi aliniată orizontal. Pentru textul cu mai multe linii, această soluție este rar folosită, mai des această opțiune poate fi găsită pentru alinierea intervalelor, link-urilor sau imaginilor.
Odată a trebuit să vin cu text pentru a arăta cum funcționează alinierea textului cu CSS, dar nu mi-a venit nimic interesant în minte. La început m-am hotărât să copiez undeva o cântă de creșă, dar mi-am amintit că acest lucru ar putea strica unicitatea articolului, iar dragii noștri cititori nu o vor putea găsi pe Google. Și apoi am decis să scriu acest paragraf aici - la urma urmei, punctul nu este cu el, dar punctul este în aliniere.
.example-text (text-align: center; padding: 10px; background: # FF90B8;)Trebuie 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 în bloc, care este aliniat în centru față de înveliș.
.example-wrapper3 (text-align: center; fundal: # FF90B8;) .inline-text (afișare: inline-block; lățime: 40%; padding: 10px; text-align: stânga; fundal: # FFEfee;)Alinierea casetelor cu marginile
Elementele bloc cu o lățime cunoscută sunt ușor aliniate pe orizontală dacă sunt setate la „margin-left: auto; margin-right: auto”. Se folosește de obicei notația prescurtată: „ marja: 0 auto„(orice valoare poate fi folosită în loc de zero). Dar această metodă nu va funcționa 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 merită 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 pare evident, am văzut uneori exemple înspăimântătoare cu marje negative, așa că am decis să clarific.
Aliniere verticală
Există mult mai multe probleme cu alinierea verticală - aparent, acest lucru nu a fost prevăzut în CSS. Există mai multe modalități de a obține rezultatul dorit, dar nu sunt toate foarte frumoase.
Alinierea cu proprietatea line-height
În cazul în care există o singură linie în bloc, puteți obține alinierea verticală a acesteia prin aplicarea " inaltimea liniei"și setați-l la înălțimea dorită. Pentru a fi în siguranță, ar trebui să setați și" înălțime ", a cărei valoare va fi egală cu valoarea "line-height", deoarece aceasta din urmă nu este acceptată în toate browserele.
.example-wrapper4 (linie-înălțime: 100px; culoare: # DC09C0; fundal: # E5DAE1; înălțime: 100px; text-align: center;)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. Blocul interior poate fi cu mai multe linii, dar este necesar „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șaj: bloc inline; dimensiunea fontului: 14px; înălțimea liniei: 1.5; aliniere verticală: mijloc; fundal: # FFFAF2; culoare: # FF9B00; aliniere text: centru;)Blocul de ambalare trebuie să aibă setat „dimensiunea fontului: 0”. Dacă nu setați dimensiunea fontului la zero, browserul va adăuga câțiva pixeli suplimentari de la sine. 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. Cu valoarea" middle "setată, conținutul din interiorul celulei este centrat. Desigur, aspectul tabelului este considerat arhaic în zilele noastre, 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 layout luat dintr-un proiect gata făcut. Interesantă este imaginea, care este centrată vertical în acest fel.
.one_product .img_wrapper (afișare: table-cell; înălțime: 169 px; vertical-align: middle; overflow: hidden; fundal: #fff; lățime: 255px;) .one_product img (max-height: 169px; max-width: 100) %; lățime minimă: 140 px; afișare: bloc; marjă: 0 automat;)Trebuie reținut că, dacă un element are „float” altul decât „none”, atunci va fi în orice caz bloc (afișare: bloc) - atunci va trebui să utilizați un bloc suplimentar de înveliș.
Alinierea cu un element suplimentar în linie
Și pentru elementele inline puteți aplica " vertical-align: mijloc". În acest caz, toate elementele cu" display: inline„care sunt pe aceeași linie se vor alinia cu linia 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. Este convenabil să folosiți pseudo-elementele: înainte sau: după.
.example-wrapper6 (înălțime: 300px; text-align: center; fundal: # 70DAF1;) .pudge (afișare: inline-block; vertical-align: middle; fundal: url (pudge.png); culoare de fundal: # fff; lățime: 200 px; înălțime: 200 px;) .riki (afișare: bloc inline; înălțime: 100%; aliniere verticală: mijloc;)Afișare: flexați și aliniați
Dacă nu vă pasă prea mult de utilizatorii Explorer 8 sau vă pasă atât de mult încât sunteți dispus să introduceți ceva javascript suplimentar de dragul lor, atunci puteți folosi „display: flex”. Cutiile flexibile fac o treabă grozavă în rezolvarea problemelor de aliniere și scrieți doar „margin: auto” pentru a centra conținutul în interior.
Până acum, această metodă nu mi-a venit practic, dar nu există restricții speciale pentru ea.
Ei bine, asta este tot ce am vrut să scriu despre alinierea CSS. Acum centrarea conținutului nu va fi o problemă!
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 BOM CSS3- text-overflow, word-break, word-wrap, poate fi citit.
Formatarea textului în CSS
1. Alinierea orizontală a text-align
Proprietatea aliniază liniile de text dintr-un bloc în lățime în raport cu marginile acestuia. Se aplică numai elementelor de bloc, cum ar fi paragrafele. Mostenit.
| Valori: | |
| stânga | Alinierea la stânga a elementului. Valoarea implicită pentru limbile care citesc de la stânga la dreapta. |
| dreapta | Alinierea la dreapta a elementului. |
| centru | Alinierea la centru a unui element controlează alinierea conținutului, nu elementele în sine. Centrează fiecare linie a textului elementului. |
| justifica | Justificare la lățimea elementului. În textul justificat, ambele capete ale liniei se ghemuiesc pe marginile din stânga și din dreapta ale elementului părinte. Spațiile dintre cuvinte și litere sunt distribuite astfel încât lungimea tuturor liniilor să fie egală. Diferitele browsere pot crește atât distanța dintre cuvinte, cât și spațierea 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. Indentarea textului
Setează indentarea (ledge) pe prima linie a unui element, dând iluzia unui text structurat. Se aplică oricărui element bloc, valoarea implicită este 0. Dacă există o imagine pe prima linie a unui element bloc, aceasta se va deplasa 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. Container pe rând Proprietatea setează distanța dintre liniile de bază ale liniilor de text, definind valoarea cu care înălțimea blocului fiecărui element este mărită sau micșorată. Controlează spațierea între linii - spațiul suplimentar dintre liniile de deasupra și dedesubtul textului. Pentru a determina distanța dintre 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 partea de sus și de jos a zonei de conținut. Ia doar valori pozitive. Spația dintre linii standard este echivalentă cu 120%.
Dacă înălțimea și înălțimea liniei sunt egale, aliniază textul la î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. Un exemplu de afișare a diferitelor valori de 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 centrală a părintelui. |
| sub | Face un indice de element (similar cu eticheta ). Gradul de retrogradare a unui element poate varia în funcție de browserul utilizatorului. |
| super | Face un element superscript (similar cu eticheta ). Cu toate acestea, valorile sup și super nu modifică dimensiunea fontului; în mod implicit, textul superscriptului și descendentului are aceeași dimensiune cu textul elementului părinte. |
| top | Marginea superioară a elementului este aliniată cu marginea superioară a celui mai înalt element din linie. |
| text-top | Partea de sus a elementului este aliniată cu partea de sus a fontului elementului părinte. |
| mijloc | Linia de mijloc 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 | Partea de jos a elementului este aliniată cu partea de jos a fontului elementului părinte. |
| lungime | Setează valoarea în unități de lungime prin deplasarea unui element la o distanță specificată. |
| % | Nu permite setarea mijlocului, 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 20px, atunci linia de bază a elementului este ridicată cu 10px. |
| iniţială | Setează valoarea proprietății la valoarea sa implicită. |
| moşteni | Moștenește valoarea proprietății de la elementul părinte. |
Html, există un parametru generic numit ALIGN. Poate fi aplicat cu diverse etichete html:
p | h1 | div | masa | capul | tbody | tfoot | tr | a | td
Valori posibile:
Centru- alinierea la centru
Stânga- aliniere pe partea stângă
Dreapta- pe dreapta
Justifica- dupa latime, stanga si dreapta. În acest caz, apariția unor decalaje mari între cuvinte.
Textul este justificat
Aspect în browser:
Titlul este centrat
Textul este justificat. Textul este justificat. Textul este justificat. Textul este justificat. Textul este justificat. Textul este justificat. Textul este justificat. Textul este justificat. Textul este justificat. Textul este justificat. Textul este justificat. Textul este justificat.
Conținutul acestui bloc este aliniat la dreapta
Rețineți că alinierea la stânga este automată. Prin urmare, nu este nevoie să specificați o astfel de valoare pentru parametrul de aliniere.
Până acum, tu și cu mine am aliniat elemente doar la stânga. Mai precis, nu am făcut acest lucru deloc, iar browserul însuși, implicit, aliniază elementele la stânga. Desigur, ar fi prea plictisitor să aliniezi totul la stânga. Prin urmare, există moduri diferite de a centra și alinia dreapta.
Alinierea elementelor este ceva ce trebuie doar să știi când. Primul lucru de făcut este să tastați cea mai simplă pagină.
A fost odată o etichetă
Puteți adăuga o imagine, de asemenea aliniată în centru, de asemenea, să trecem la următoarea linie folosind eticheta
:
Titlu de nivel 1, centrat
A fost o etichetă
Pentru a rezolva această problemă, dezvoltatorii au venit cu o modalitate universală de a alinia elementele. HTML... Modul este de a folosi așa-numitele containere, care sunt create folosind eticheta Să scriem la fel și acum Cod HTML dar cu utilizarea containerelor, în plus, să nu aliniem la centru, ci la dreapta. După cum puteți vedea, totul funcționează. Vă sfătuiesc să modificați și valorile atributelor" alinia„să se uite la alte tipuri de aliniere a containerelor. 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 din articolele următoare. Până atunci, pagina ta ar trebui să arate astfel: Salutări, Mihail Rusakov. P.S. Dacă vrei să afli mai multe despre HTML, apoi urmăriți cursul meu gratuit cu un exemplu de creare a unui site web la HTML: Alinierea textului determină aspectul și orientarea marginilor paragrafului și poate fi aliniată la stânga, aliniată la dreapta, centrată sau justificată. Masa 1 arată opțiunile pentru alinierea unui bloc de text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Cea mai comună opțiune este alinierea la stânga, unde partea stângă a textului este împinsă până la margine, în timp ce textul din dreapta rămâne zimțat. Alinierea la dreapta și alinierea la centru sunt utilizate în principal în titluri și subtitluri. Trebuie avut în vedere faptul că atunci când folosiți justificarea în text, pot apărea spații mari între cuvinte, ceea ce nu este foarte frumos. O etichetă de paragraf este de obicei folosită pentru a seta alinierea textului Cu atributul align, care definește metoda de aliniere. De asemenea, un bloc de text poate fi aliniat folosind eticheta Text Text Text Text Alinierea la stânga este setată implicit, deci nu este nevoie să o specificați din nou. Deci align = „stânga” poate fi omis. Diferența dintre paragraf (tag ) și eticheta Atributul de aliniere este destul de versatil și poate fi aplicat nu numai textului corpului, ci și titlurilor precum Exemplul 1. Alinierea textului
Metoda forței brute Împărțim deșertul într-un număr de secțiuni elementare, a căror dimensiune coincide cu dimensiunile totale ale leului, dar în același timp mai mici decât dimensiunea cuștii. Mai departe, prin simpla enumerare, determinăm zona în care se află leul, ceea ce duce automat la capturarea acestuia. Metoda dihotomiei Împărțim deșertul în două jumătăți. Într-o parte este un leu, în cealaltă nu este. Luați jumătatea leului și împărțiți-o din nou în jumătate. Repetăm acest lucru până când leul este prins. Rezultatul exemplului este prezentat în Fig. unu. Orez. 1. Aliniați textul la dreapta și la stânga În acest exemplu, titlul este aliniat la centrul ferestrei browser, paragraful selectat este aliniat la dreapta, iar corpul textului este aliniat la stânga.
Titlu de nivel 1, centrat
Titlul de nivel 1 aliniat la dreapta
Tab. 1. Modalități de aliniere a textului
Aliniere la stânga
Aliniați la dreapta
Alinierea la centru
Justificați la lățime
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Tab. 2. Alinierea textului folosind parametrul de aliniere
cod HTML
Descriere
Adaugă un nou paragraf de text, aliniat implicit la stânga. Mici indentări verticale sunt adăugate automat înainte și după paragraf.
Alinierea la centru.
Alinierea la stânga.
Justificarea lățimii.
Dezactivează împachetarea automată a liniilor, chiar dacă textul este mai larg decât fereastra browserului.
Text
Permite browserului să facă întreruperi de linie în locația specificată, chiar dacă este utilizată o etichetă
Alinierea la centru.
Alinierea la stânga.
Alinierea la dreapta.
Justificarea lățimii.
... Exemplul 1 arată cum să setați alinierea într-un astfel de caz.
Cum să prinzi un leu?
Top articole similare
