Valoarea atributului align specifică alinierea la dreapta. Valoare implicită

pe margine.

Sintaxă

Valori

center Aliniază textul la centru. Textul este plasat orizontal în fereastra browserului sau containerul în care se află blocul de text. Liniile de text par să fie înșirate pe o axă invizibilă care trece prin centrul paginii web. O metodă de aliniere similară este utilizată în mod activ în titluri și diferite subtitrări, cum ar fi legendele, dă un aspect oficial și solid designului textului. În toate celelalte cazuri, alinierea la centru este rar folosită pentru motivul acesta că este incomod să citești o cantitate mare de astfel de text. stânga Aliniază textul la stânga. În acest caz, liniile de text sunt aliniate la stânga, iar marginea dreaptă este situată într-o „scără”. Această metodă de aliniere este cea mai populară pe site-uri web, deoarece permite utilizatorului să caute cu ușurință linie nouăși confortabil de citit text mare. dreapta Aliniază textul la dreapta. Această metodă de aliniere acționează ca un antagonist față de tipul anterior. Și anume, liniile de text sunt aliniate la dreapta, în timp ce stânga rămâne „zdrențuită”. Datorită faptului că marginea din stânga nu este aliniată, și anume, citirea liniilor noi începe cu ea, un astfel de text este mai greu de citit decât dacă ar fi aliniat la stânga. Prin urmare, alinierea la dreapta este de obicei folosită pentru titluri scurte de cel mult trei linii. Nu luăm în considerare site-uri specifice în care textul trebuie citit de la dreapta la stânga, acolo este posibil mod similar alinierea va fi utilă. Dar unde la noi ați văzut astfel de site-uri. justify Justify, ceea ce înseamnă justificat stânga și dreapta în același timp. Pentru a efectua această acțiune, browserul în acest caz adaugă spații între cuvinte.

Valoare implicită

HTML 4.01 IE Cr Op Sa Fx

Rezultat acest exemplu prezentată în fig. unu.

Orez. 1. Aliniați elementele cu atribut de aliniere

Bună ziua, dragi cititori ai blogului. În acest articol, continuăm să învățăm elementele de bază ale stilului Markup CSSși uită-te la vertical-align, text-align, text-indent și alte proprietăți pentru decorarea textului html.

Alinierea textului cu CSS

Să începem cu atributele de stil care controlează afișarea textului în elemente la nivel de bloc. Sa incepem cu proprietăți de aliniere a textului, care este de fapt un înlocuitor pentru atributul align (folosit pentru a alinia conținutul elementelor html, cum ar fi p paragrafe).

proprietate de stil aliniere text seturi aliniere orizontala textși are doar patru valori posibile:

text-align: stânga|dreapta|centru|justificare

Valorile disponibile ale acestei reguli determină alinierea, respectiv: stânga — la stânga, dreapta — la dreapta, centru — la centru și justifică — la lățimea paginii (stânga și dreapta în același timp prin mărirea spațiului dintre cuvinte). De exemplu, textul acestui articol este aliniat la lățimea paginii (dacă observați că are margini egale atât în ​​stânga, cât și în dreapta) folosind regula text-align:justify.

În mod implicit, alinierea orizontală este stânga, deci nu trebuie să specificați text-align:left decât dacă elementele părinte specifică o aliniere diferită.

Exemple de utilizare a proprietății:

p (alinierea textului: justificare)
h1 (alinierea textului: centru)

Următoarea proprietate CSS text-ident seturi indentare pentru linia roșie, de exemplu pentru textul dintr-o etichetă p paragraf. Această regulă, la fel ca text-align, se aplică numai elementelor la nivel de bloc. Sintaxă:

indentarea textului:<отступ>

Valorile absolute și relative ale indentării sunt permise aici. Valorile absolute (px - pixeli, em, ex etc.) pot fi specificate atât cu semnul plus, cât și cu semnul minus. Valoare relativă de obicei dat ca procent (%). Valoarea relativă se calculează din lățimea zonei care este rezervată textului. Deci, regula css text-indent:50% va seta linia roșie egală cu jumătate din lungimea acestei linii. În mod implicit, indentarea „liniei roșii” este zero. Exemplu:

p ( text-ident: 10px; )

Apoi, luați în considerare proprietatea de aliniere verticală vertical-align. Această proprietate este aplicabilă tuturor elemente htmlși pentru aproape toată lumea înseamnă aliniere unul cu celălalt elemente inline cu text relativ la linia de bază. În plus față de etichetele de tabel td și th, în care tot conținutul va fi aliniat vertical. Sintaxă:

vertical-align: linie de bază|sub|super|sus|text-sus|middle|bottom|text-bottom|<величина>

Să ne uităm la fiecare valoare mai detaliat:

• linie de bază - alinierea unei bucăți de text de-a lungul liniei de bază element părinte. Aceasta este valoarea implicită;
• sub - un fragment de text este afișat ca indice sau indice pentru elementul părinte;
• super - fragment de text este afișat ca superscript sau indicele pentru elementul părinte;
• top - alinierea fragmentului de text la marginea superioară a elementului părinte;
• text-top - alinierea fragmentului la marginea superioară a textului elementului părinte;
• mijloc - alinierea centrului fragmentului de text la centrul elementului părinte;
• jos - alinierea fragmentului de text la marginea de jos a elementului părinte;
• text-bottom - aliniază fragmentul la marginea de jos a textului elementului părinte;

În figura de mai jos, puteți vedea comportamentul fragmentelor de testare cu diferite valori ale proprietății de aliniere verticală în motor de cautare Explorer 11:

Pe lângă valorile de mai sus, puteți specifica valori numerice. Asa de, regula css vertical-align:0 ar însemna același lucru cu vertical-align:baseline. Și regula vertical-align:10px va muta textul în sus cu 10 pixeli față de linia de bază. Pentru a muta textul în jos, valoarea trebuie specificată cu un minus.

Schimbarea poate fi, de asemenea, setată unități relative măsurători, de exemplu în em și în ex sau ca procent.

Pentru aliniere verticală conținutul celulelor tabelului în aliniere verticală ar trebui să utilizeze valorile:

• top - pentru a alinia conținutul la marginea superioară a celulei;
• jos - pentru a alinia conținutul la marginea de jos a celulei;
• mijloc - pentru a se alinia la centrul celulei (utilizat implicit).

Pentru realizare rezultatul dorit, de obicei trebuie să experimentezi sensuri diferite proprietățile stilului de aliniere verticală. numeroși valori posibile da rezultate foarte diferite în cazuri diferite.

Opțiunile de spații albe și de înfășurare a cuvintelor care controlează întreruperile de linie

Următorul pe linie este parametrul de spațiu alb, care este responsabil pentru afișarea caracterelor de spațiu alb pe pagina html.

După cum știm, în mod implicit, browser-ul combină toate consecutive caractere cu spații albe: spații, rupturi de rând și caractere de tabulare - într-un singur spațiu. O exceptie etichetă

, textul plasat în el este afișat ca atare, cu toate spațiile.

Proprietatea spațiu alb are următoarea sintaxă:
spatiu alb: normal|pre|nowrap|pre-wrap|pre-line
Este clar că valoarea normală este utilizată în mod implicit și lasă totul așa cum este descris mai sus, toate spațiile consecutive sunt combinate într-unul singur și rupturile de linie sunt setate automat.
Utilizarea valorii 
Va fi o analogie completă la aplicarea etichetei 
Browserul va reda pagina pentru toți spatii suplimentareși cratime așa cum au fost adăugate de dezvoltator.  Dacă rândul de text este prea lung, acesta va fi adăugat bara orizontala sul.

Valoarea nowrap împiedică browserul să încapsuleze linii, iar textul este afișat ca o singură linie.  Singurul lucru este adăugarea unei etichete 
va împacheta textul pe o nouă linie.
Valoarea pre-wrap păstrează toate secvențele de spații și întreruperi de linie, dar dacă linia nu se încadrează în zona specificată, atunci browserul înfășoară automat textul pe o nouă linie.
Ei bine, valoarea pre-linie convertește spațiile într-un singur spațiu, liniile noi sunt păstrate, iar browserul poate rupe liniile care sunt prea lungi pentru a evita derularea orizontală.
Exemplu de utilizare:
p (spațiu alb: pre; )
Apoi, luați în considerare parametrul de înfășurare a cuvintelor
, care vă solicită să specificați dacă transferați sau nu cuvinte lungi, care nu se încadrează în zona dată.  Această proprietate nu este folosită des, dar uneori nu vă puteți descurca fără ea:
word-wrap: normal|break-word
Valoarea normală îi spune browserului că textul se poate sparge doar pe spații, iar acesta este un comportament normal al browserului.  Iar valoarea break-word permite browserului să insereze întreruperi de rând în interiorul cuvintelor.  Exemplu:
p (înfășurare de cuvânt: ruptură de cuvânt; )
Opțiuni de umbră text - proprietate text-shadow
Pentru iubitorii de diferite decorațiuni în standardul CSS3, a devenit posibil să se stabilească o umbră pentru text.  Utilizarea corectă a proprietății text-shadow vă permite să reînviați vizibil pagină web.  Sintaxă:
text-shadow: niciunul |<цвет> <горизонтальное смещение> <вертикальное смещение> [<радиус размытия>]
Valoarea none dezactivează adăugarea unei umbre textului și este setată implicit.
Culoarea umbrei specificat în orice format CSS disponibil și nu este parametru obligatoriu.  În mod implicit, culoarea umbrei este aceeași cu culoarea textului.
Decalaj orizontal al umbrei poate fi setat în orice unitate CSS acceptată.  Dacă valoarea este pozitivă, umbra va fi poziționată în dreapta textului, cu negativ - la stânga. Valoare zero va poziționa umbra chiar sub text și are sens numai dacă este setată umbra estompată.
Decalaj vertical al umbrei poate fi setat și în orice unitate CSS acceptată.  O valoare pozitivă va muta umbra sub text, o valoare negativă o va muta mai sus.  O valoare de zero va poziționa umbra direct sub text.
În orice unitate de măsură, și raza de estompare a umbrei.  Cu cât această valoare este mai mare, cu atât umbra devine mai largă și se netezește mai mult.  Dacă această opțiune nu este setată, se presupune valoarea de estompare zero.  Deoarece algoritmul de netezire are de obicei browsere diferite este diferit, aspectul umbrei poate fi ușor diferit în funcție de browser.
Luați în considerare un exemplu:
p( 
text-shadow: roșu 1px 1px 2px 
dimensiunea fontului: 2em 

}
Și așa va arăta textul paragrafului p folosind această regulă stil în Internet Explorer 11:

Aici voi încheia articolul.  Pentru a afla mai multe despre Proprietăți CSS nu uitați să vă abonați la actualizările blogului și să citiți articole din secțiunea „”.  Ne vedem în curând!
Pentru imagini, standardele nu definesc o aliniere implicită în ceea ce privește textul și alte imagini de pe aceeași linie — nu este întotdeauna posibil să se prezică cum vor arăta aceste componente.1 În documentele HTML, imaginile sunt de obicei aranjate „în linie” cu un singur rând de text.  După cum se obișnuiește în media tipărită mass media textul le „înfășoară”, astfel încât mai multe linii pot fi adiacente imaginii și deloc una.
Din fericire, creatorii de documente au un anumit control asupra modului în care imaginile se aliniază cu textul din jur prin atributul de aliniere al etichetei. .  Standardele HTML și XHTML definesc cinci valori pentru atributul de aliniere: stânga, dreapta, sus, mijloc, jos.  Valorile stânga și dreapta fac ca textul să se înfășoare în jurul imaginii, deplasat la marginea corespunzătoare.  Restul trei aliniază imaginea direcție verticalăîn raport cu textul înconjurător.
Toate browserele populare, inclusiv Opera, Firefox, Netscape și Internet Explorer, sunt de acord că atributul align=bottom este implicit pentru alinierea verticală și poziționează imaginile la egalitate deasupra caracterului cel mai de sus într-o linie de text, vezi Figura 2.  15.11.
În același timp, browserele nu sunt de acord cu privire la modul de poziționare a imaginilor cu atributul align=middle în raport cu textul.  Pe fig.  Figura 5.11 arată că Netscape și Opera poziționează imaginea pe linia din mijloc a textului.  În ceea ce privește browserele Internet Explorer
Orez.  5.11.  Alinierea standard a imaginilor încorporate
Orez.  5.12.  Internet Explorer și Firefox aliniază linia centrală a imaginii cu linia centrală a celui mai înalt element, nu linia centrală a textului
și Firefox, poziționează imaginea în mijlocul celui mai înalt element, care nu este neapărat un element de text (Figura 5.12).
În plus, browserele acceptă mai mult sau mai puțin cinci funcții suplimentare de aliniere verticală pentru imagini: texttop, center, absmiddle, baseline și absbottom (ridicați mâna dacă nu ați ghicit ce înseamnă):
Declarația align=texttop îi spune browserului să alinieze marginea de sus a imaginii cu marginea de sus a celui mai înalt element de text din linia curentă.  În caz contrar, partea de sus este activă, ceea ce aliniază marginea superioară a imaginii cu marginea superioară a celui mai înalt element, componentă de text sau imagine de pe linia curentă.  Dacă linia nu conține alte imagini deasupra textului, texttop și top au același efect.  Opera nu acceptă texttop, dar alte browsere populare îl interpretează strict conform acestei descrieri.
Introdusă pentru prima dată în Internet Explorer și Netscape, valoarea centrală este interpretată de Internet Explorer, Netscape și Firefox exact în același mod ca valoarea de mijloc.  Doar să nu uităm că fiecare dintre ei înțelege valoarea mijlocului în felul său.  Opera ignoră expresia align=center.
Dacă atribuiți atributul de aliniere al etichetei valoare absmiddle, browserul va seta mijlocul absolut al imaginii față de mijlocul absolut al liniei curente.  Nu așa funcționează valorile din mijloc și centru, care aliniază mijlocul imaginii cu linia de bază a liniei curente de text.  În timp ce Netscape și Opera nu fac distincție între absmiddle și middle, Firefox și Internet Explorer folosesc aceste valori pentru a alinia selectiv imaginile la liniile mediane.  Cu alte cuvinte, Firefox și Internet Explorer tratează absmiddle în același mod în care Netscape tratează mijlocul.
Orez.  5.13.  La alinierea imaginilor cu atributul alingn=absbottom, browserele iau în considerare descendenții
de jos și de bază (implicit)
Valorile de jos și de bază au același efect ca și cum nu ați include deloc atributul de aliniere.  Browserul aliniază marginea de jos a imaginii cu linia de bază a textului.  Acest lucru nu trebuie confundat cu efectul valorii de jos, care ia în considerare și acele părți ale literelor care coboară sub linia de bază.1 (Dacă tot țineți mâna sus, o puteți coborî.)
Declarația align=absbottom îi spune browserului să alinieze partea de jos a imaginii cu partea de jos reală a textului de pe linia curentă.  Partea de jos adevărată este punctul cel mai de jos al textului, incluzând toți descendenții (de exemplu, Partea de jos caracterul „y”), chiar dacă nu există niciunul în șir.  Linia de bază trece de-a lungul marginii inferioare a „v” în caracterul „y”.  Opera, purtătorul standardului, ignoră valoarea absbottom, în timp ce alte browsere populare o tratează așa cum este descris (Figura 5.13).
Folosiți partea de sus și de mijloc pentru a alinia pictogramele, marcatoarele de listă și alte imagini speciale cu textul din apropiere.  În alte cazuri, align=bottom (selectat implicit) obține cel mai bun lucru aspect.  Când aliniați una sau mai multe imagini pe linie, alegeți valoarea atributului care vă va oferi cel mai bun aspect pentru documentul dvs.
Salutari Prieteni!  Astăzi vom vorbi despre eticheta de paragraf și atributul de aliniere.  În general, tot conținutul dintr-o pagină ar trebui împărțit în paragrafe.  Conținutul paragrafului este scris între etichete 
Text…
.  Când afișăm 2 paragrafe consecutive, între ele se formează un câmp invizibil, care le împinge unul de celălalt.  Eticheta este eticheta bloc deci ocupă toată lățimea paginii.

De exemplu, să luăm o pagină cu următorul cod:

 

 
 
 
 
 
 

 Primul paragraf: Lorem Ipsum este pur și simplu un text fals al industriei de tipărire și de tipărire.  Lorem Ipsum a fost textul fals standard al industriei încă din anii 1500, când o imprimantă necunoscută a luat o bucătărie de tipărire și a amestecat-o pentru a face o carte cu specimene de tipar.
 

 Al doilea paragraf: Este un fapt stabilit de mult că un cititor va fi distras de conținutul care poate fi citit al unei pagini atunci când se uită la aspectul acesteia.  Scopul utilizării Lorem Ipsum este că are o distribuție mai mult sau mai puțin normală a literelor, spre deosebire de utilizarea „Conținut aici, conținut aici”, făcându-l să pară ca o engleză lizibilă.
 

Să vedem cum arată acest caz în browser:
 


Probabil ați observat că există o etichetă în codul paginii puternic, această etichetă face textul aldine.
Atributele etichetei
Pentru fiecare etichetă, în unele cazuri chiar trebuie să specificați atribute.  Prin atribut, îi spunem browserului exact cum să afișeze acest sau acel element pe pagină.
Atributul este specificat în paranteza etichetei de deschidere și are următoarea sintaxă: attribute_name="valoare"
atribut de aliniere
De exemplu, avem un paragraf pe pagină și vrem să-i aliniem conținutul.  Pentru a face acest lucru, scriem un atribut în interiorul etichetei de deschidere alinia, care este responsabil pentru alinierea conținutului din paragraf și setați-l la o singură valoare.
Conținutul paragrafului.


Acest atribut are 4 valori:
1 stânga– Aliniază conținutul la stânga.  Această valoare este implicită.  Adică dacă nu specificăm atributul pentru paragraf alinia, atunci conținutul din interiorul paragrafului este aliniat la stânga în mod implicit.  Acest lucru poate fi văzut în exemplul anterior.
2.Corect– Aliniază conținutul la dreapta.

 
Text…
Iată cum arată în browser:
 

3.Centru- Aliniază conținutul la centrul paginii.

 
Text…
 

4. Justificați– Aliniază conținutul la lățimea paginii.

 
Text…
 

Rezumatul lecției: 
Astăzi am învățat ce paragrafîn html.  Paragrafele sunt folosite foarte des în html.  Am învățat și ce este un atribut de etichetă.  Și am învățat atributul de aliniere alinia. Care poate lua una dintre următoarele valori: stânga (implicit)dreapta,centru,justifica.
Descriere
 
Aliniază un bloc de text la margine.
Stilurile trebuie folosite în locul acestui atribut
 
Sintaxă
 
Valori
stânga Aliniază textul la stânga.  În acest caz, liniile de text sunt aliniate la stânga, iar marginea dreaptă este situată într-o „scără”.  Această metodă de aliniere este cea mai populară pe site-uri web, deoarece permite utilizatorului să caute cu ușurință o nouă linie și să citească confortabil text mare.  center Aliniază textul la centru.  Textul este plasat orizontal în fereastra browserului sau containerul în care se află blocul de text.  Liniile de text par să fie înșirate pe o axă invizibilă care trece prin centrul paginii web.  O metodă de aliniere similară este utilizată în mod activ în titluri și diferite subtitrări, cum ar fi legendele, dă un aspect oficial și solid designului textului.  În toate celelalte cazuri, alinierea la centru este rar folosită pentru că este incomod să citiți o cantitate mare de astfel de text.  dreapta Aliniază textul la dreapta.  Această metodă de aliniere acționează ca un antagonist față de tipul anterior.  Și anume, liniile de text sunt aliniate la dreapta, în timp ce stânga rămâne „zdrențuită”.  Datorită faptului că marginea stângă nu este aliniată, și anume din care se citesc linii noi, un astfel de text este mai greu de citit decât dacă ar fi aliniat la stânga.  Prin urmare, alinierea la dreapta este de obicei folosită pentru titluri scurte de cel mult trei linii.  Nu luăm în considerare site-uri specifice în care textul trebuie citit de la dreapta la stânga, unde o metodă similară de aliniere poate fi utilă.  Dar unde la noi ați văzut astfel de site-uri.  justify Justify, ceea ce înseamnă justificat stânga și dreapta în același timp.  Pentru a efectua această acțiune, browserul în acest caz adaugă spații între cuvinte. 
Valoare implicită
 
Exemplu.  Alinierea textului


 
 
 
 
 
 
Duis te feugifacilisi.  Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et justo odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla faciliti.  Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat.  Duis te feugifacilisi per suscipit lobortis nisl ut aliquip ex en commodo consequat.
 

Browsere: Desktop Mobile ?

Internet Explorer
Crom
Operă
safari
Firefox
1

1

1

1

1


Android
Firefox Mobile
Opera Mobile
Safari Mobile
1

1

6

1


✖

Browsere
Următoarea notație este utilizată în tabelul browserului.
- elementul este pe deplin suportat de browser;
- elementul nu este perceput de browser și este ignorat;
- poate apărea în timpul funcționării diverse erori, sau elementul este susținut cu rezerve.
Numărul indică versiunea de browser din care este acceptat elementul.