Alinierea textului în CSS: proprietatea text-align
În programe precum Microsoft Word, de exemplu, probabil că ați întâlnit instrumente pentru alinierea orizontală a textului. Puteți alinia textul la stânga sau la dreapta, centrat sau justificat. Același lucru este valabil și în CSS - alinierea textului se face folosind proprietatea text-align și valorile corespunzătoare, care sunt afișate în tabel:
Exemplu de intrare de stil:
P ( alinierea textului: stânga; )
Valori la stânga, la dreapta și la centru Textul aliniat la stânga arată aproape întotdeauna bine pe paginile web și este ușor de citit. Alinierea corectă în limbile europene, de regulă, este rar folosită, dar nu poate fi numită complet inutilă: acest stil este util pentru a proiecta frumos legendele pentru fotografii sau citate, alinierea conținutului celulelor tabelului sau a fragmentelor mici de text. Valoarea centrală este adesea folosită în aceleași scopuri. Valoarea justify Justify text în CSS poate fi folosită pentru versiunile tipărite ale paginilor, dar nu este recomandat să vă lăsați duși de acest stil pe paginile web concepute pentru vizualizare afișată. De ce? La prima vedere, textul justificat arată frumos și uniform, ca o coloană dintr-un ziar. Dar pentru a întinde textul în acest fel, browserul trebuie să adauge spațiu suplimentar între cuvinte, ceea ce poate crea lacune inestetice în text, care îngreunează citirea. În programele concepute pentru a pregăti datele pentru imprimare, există o ajustare mult mai fină a spațierii în text și, de asemenea, utilizează adesea împachetarea cuvintelor, care nu este disponibilă în multe browsere. Prin urmare, este necesar să verificați cât de justificat arată textul pe paginile web, iar prima întrebare pe care trebuie să vă puneți este: este ușor de citit? Acest lucru este valabil mai ales pentru blocurile înguste de text (inclusiv versiunile mobile ale paginilor). Valori de început și de sfârșit Valorile de început și de sfârșit pentru proprietatea text-align sunt implementate în CSS3 și funcționează la fel ca la stânga și la dreapta, dar există o diferență. Prin aplicarea valorii de început textului care rulează de la stânga la dreapta (LTR), alinierea va fi la stânga (în mod corespunzător, pentru textul care rulează de la dreapta la stânga (RTL), alinierea va fi dreapta) . Este logic ca valoarea finală să funcționeze în sens invers (adică aliniază textul LTR la dreapta și textul RTL la stânga). Aceste două valori nu sunt acceptate de unele browsere, inclusiv de Internet Explorer, așa că, cu excepția cazului în care trebuie neapărat să le utilizați, vă recomandăm să utilizați valorile stânga și dreapta.Capturile de ecran arată exemple de utilizare a diferitelor valori pentru proprietatea CSS text-align:
Captură de ecran 1: Alinierea textului LTR la stânga utilizând valoarea de pornire. Un aspect similar poate fi obținut folosind valoarea din stânga. 
Captura de ecran 2: Alinierea textului LTR la dreapta folosind valoarea finală. Un aspect similar poate fi obținut folosind valoarea potrivită. 
Captură de ecran 3: Alinierea textului la lățime. Cu font mic și lățime mare de pagină/bloc, această opțiune pentru alinierea textului pe o pagină web pare acceptabilă. 
Captura de ecran 4: dimensiunea fontului a fost mărită și lățimea blocului a fost redusă în comparație cu exemplul anterior. După cum puteți vedea, în text au apărut lacune urâte (subliniate cu o linie roșie). 
Captura de ecran 5: două moduri de a alinia text folosind exemplul versiunii mobile a tutorialului nostru (în stânga - text-align: stânga, pe dreapta - text-align: justify). Încercați să citiți textul din ambele coloane și stabiliți care opțiune este mai confortabil de citit.
În acest articol vă voi spune cum să plasați un bloc div centrat. Există multe moduri, dar nu toate vă permit să faceți exact ceea ce este necesar. Voi da exemple cu cele mai bune și mai simple metode.
În general, există o duzină de moduri de a centra corect un bloc div; fiecare webmaster folosește metoda sa preferată/cea mai convenabilă. Dar, cu toate acestea, există mai multe metode de bază, cele mai populare și universale. Și, desigur, valabil după toate standardele moderne.
Și da, merită să spunem imediat că este posibil ca aceste metode să nu funcționeze în ie6 sau ceva similar. Nici măcar nu dau atenție acestui browser, indiferent de câte persoane îl folosesc. Este timpul să nu mai folosiți lucruri vechi.
Deci ce avem?
Metoda 1. Cel mai tare
margine:0 auto;O metodă foarte eficientă, care vă permite, de asemenea, să aliniați indentările de sus și de jos. Care este trucul metodei? Totul este pur și simplu nebunesc. Avem un bloc cu o anumită lățime (în pixeli sau procent), căruia îi setăm aceeași indentare în dreapta și în stânga folosind proprietatea „auto”, și ca rezultat obținem un bloc div centrat. Prima valoare (0 în exemplu) este umplutura de sus și de jos.
De exemplu, pentru alinierea de sus scriem:
Marja: 10px automat;
Pentru a alinia sus și jos:
Marja:10px auto 5px;
După părerea mea, acesta este cel mai bun mod centrați blocurile. Mai mult, este complet valabil.
Metoda 2. Dobânda
Dacă blocul are o lățime procentuală, atunci ne putem alinia div centrat aplicarea unei umpluturi egale pentru a aduce lățimea completă la 100%. Pentru cei care nu înțeleg, vă voi arăta cu un exemplu, este mai ușor astfel:
Avem un bloc cu o lățime de 50%, pentru a-l alinia la centru, trebuie să facem margini laterale de 25% la dreapta și respectiv la stânga. Să ne uităm la cod:
Fără a ne încorda, obținem un bloc în centru, aliniat cu matematica banală (50 + 25 + 25) :)
Metoda 3. Mixt
Această metodă a fost recomandată în comentarii om.
După cum am menționat la începutul articolului, există o mulțime de modalități de a centra un bloc. Fiecare îl alege pe cel care îi place cel mai mult. Astept comentarii si noi modalitati :)
Metoda 4: Utilizarea unui bloc suplimentar
Cale Victor in comentarii:
#dop-block ( poziție: relativ; float: dreapta; dreapta: 50%; ) #block (poziția: relativ; float: stânga; stânga: 50%; )Niciuna dintre metode nu rezolvă problema cu plutitoare în interiorul unui bloc dacă lățimea blocului nu este cunoscută (de exemplu, un meniu).
În astfel de cazuri, folosesc un bloc suplimentar care înfășoară blocul aliniat. Stilul este cam asa:
Cei mai mulți dintre noi am avut o idee clară despre o pagină perfect proiectată încă de la școală. O împrăștiere uniformă de litere, linii subțiri de cuvinte, un dreptunghi strict de text încadrat de margini uniforme - aceasta este exact imaginea pe care o vedem când răsfoim orice publicație tipărită. Există o mare tentație de a înfățișa ceva asemănător pe o pagină web, mai ales că se propune un mijloc binecunoscut pentru aceasta - alinierea textului. Cu toate acestea, ceea ce este bun pentru un tipograf este un păcat de moarte pentru un web designer. Și totul pentru că, atunci când este aplicată la marcajul site-ului, această funcție devine acoperită cu atât de multe neajunsuri încât singurul său avantaj sub forma unei margini drepte netede se estompează pur și simplu în fața ochilor noștri. Iată doar câteva motive pentru care ar trebui să renunți la justificare în favoarea alinierii la stânga.
Dezordine vizibilă în interiorul unui bloc de text
Da, da, cu cât marginile blocului de text sunt mai netede, cu atât dezordinea din interiorul acestuia este mai evidentă. În tipografie, un întreg arsenal de instrumente vă permite să obțineți consistență în text: separarea în silabe, ajustarea distanțelor dintre cuvinte și a distanțelor dintre litere și chiar și opțiuni de font ceva mai largi sau puțin mai înguste. Dar aspectul unei pagini de Internet sugerează, de regulă, o singură modalitate de a „întinde” o linie de la margine la margine - o creștere necontrolată a lățimii spațiilor. Nu numai că acest lucru duce la apariția unor goluri inestetice între cuvinte, dar aceste goluri, ca și cum ar fi prin legea răutății, cad adesea aproximativ în același loc în fiecare linie, formând așa-numitele „râuri” verticale. Toate acestea conferă textului un aspect foarte neîngrijit.
Lizibilitatea
Dar dacă estetica ar putea fi totuși sacrificată de dragul marginilor îngrijite, atunci problemele evidente cu percepția vizuală a textului sunt încă un preț prea mare de plătit pentru ele. Și textul justificat este în mod obiectiv mult mai puțin lizibil decât textul aliniat la stânga. Motivul principal constă în aceleași intervale mărite între cuvinte: ochiul este forțat în mod constant să caute începutul cuvântului următor și, din cauza diferenței de spații de la linie la linie, este forțat și să se ajusteze de la o distanță la alta. .
Necesitatea de a lucra pe lungimea liniei, adesea fără niciun rezultat
În mod corect, este de remarcat faptul că dezavantajele identificate ale textului justificat pot fi reduse prin creșterea lungimii liniei. Cu toate acestea, această metodă nu va fi întotdeauna eficientă. Dar poate reduce lizibilitatea cu un grad foarte mare de probabilitate: este dificil pentru ochi, după ce au scanat o linie lungă până la sfârșit, să sară cu precizie și rapid la începutul următoarei.
Nepotrivit pentru dispozitive mobile
Cu cât coloana cu text este mai îngustă, cu atât este mai puțin supusă alinierii. Și aici acest format intră în conflict direct cu cerințele dispozitivelor mobile, pentru care, dimpotrivă, cu cât linia este mai scurtă, cu atât mai bine. De acord, un lucru este să urmărești o linie lungă pe un monitor cu ecran complet cu ochii și cu totul altceva să defilezi fiecare rând înainte și înapoi iar și iar. O plăcere dubioasă, dar o modalitate sigură de a-ți pierde audiența mobilă!
S-ar părea că dacă am putea adăuga o funcție de împachetare în pagină, toate aceste probleme care apar la alinierea textului la lățimea paginii ar fi rezolvate. Dar problema este că marcajul HTML nu oferă o astfel de funcție. Deci, se dovedește că astăzi nu există altă modalitate de a menține o distanță acceptabilă între cuvinte pe o pagină web, în afară de alinierea textului la margine.
Astfel, atunci când creați o pagină de internet, este important să rețineți principalul lucru: un site web nu este o carte și trebuie să vă abordați designul din pozițiile dictate de tehnologie și psihologia percepției, și nu de opiniile estetice ale cuiva, totuși, foarte, foarte condiționat. Crede-mă, dacă textul tău este bine așezat și, în primul rând, ușor de citit și cu plăcere, nimeni nu va acorda atenție unui asemenea fleac precum marginile neuniforme!
Apropo, când ai citit acest articol, ai observat că textul nu este justificat?
Cum să aliniați textul în Word pe ambele margini, în mai multe moduri.
Word este cel mai popular editor. Oferă utilizatorilor un număr mare de posibilități, făcându-și munca mai simplă și mai ușoară. Pentru a le folosi, studiază bine programul, află toate secretele lui.
Vrei să știi cum să câștigi constant bani online din 500 de ruble pe zi?
Descărcați cartea mea gratuită
=>>
Când lucrați cu text, se acordă o atenție deosebită locației acestuia. Cel mai adesea, editorul setează automat alinierea la stânga. Puteți schimba locația textului folosind butoane speciale.
Unii utilizatori, fără să știe acest lucru, încearcă să facă plasarea textului chiar și folosind spații. Această metodă nu este convenabilă și necesită mult timp. În plus, este aproape imposibil să aliniezi corect textul „cu ochi”. Dacă scrieți o teză în care formatarea joacă un rol important, este posibil să nu fie acceptată.
Cum să aliniați textul în Word pe ambele margini, exact
Pentru a vă asigura că textul este uniform pe ambele margini, utilizați justificarea.
Fila Acasă
Puteți alinia textul pe ambele margini folosind meniul principal al editorului. Există mai multe butoane în secțiunea Paragraf. Pentru a vă asigura că textul este poziționat uniform pe marginile din stânga și din dreapta, selectați-l și faceți clic pe butonul „potrivire la lățime”. Textul va fi aliniat prin crearea de spațiere suplimentară.
Meniul contextual
Există o altă modalitate de a face textul chiar pe ambele părți. După selectarea textului, folosiți butonul dreapta al mouse-ului, faceți clic, iar în meniul contextual care apare, faceți clic pe „Paragraf”. Va apărea o fereastră în care trebuie să selectați alinierea „lățime”.
Chei
Există comenzi rapide speciale de la tastatură care vă permit să plasați text după cum este necesar. Pentru a face textul uniform pe ambele părți, selectați textul și apăsați tasta „CNTR + J” în același timp. Dacă tastele nu funcționează, atunci setările dvs. au fost modificate.
Opțiuni suplimentare
Făcând clic pe butoanele speciale, este posibil să nu fie suficient pentru a alinia corect textul. S-ar putea să fie nevoie să tăiați cuvintele cu silabe și să efectuați verificări suplimentare.
Similizare
Sunt cazuri când, atunci când sunt aliniate, intervalele dintre cuvinte cresc atât de mult încât textul pare ridicol. Preveniți acest lucru prin crearea unei silabe.
Deschideți secțiunea „Aspect pagină”, faceți clic pe „Separare silabe” și selectați „Automat”.
Verificarea corectitudinii înregistrării
Puteți verifica oricând dacă lucrarea dvs. este formatată corect și să o corectați. În fila „Acasă”, faceți clic pe butonul. Veți vedea spații suplimentare datorită apariției unui număr mare de puncte.
Cum să aliniați textul în Word la margini, rezumat
Alinierea textului în Word pe ambele margini este destul de simplă. Începeți să studiați editorul și vă veți ușura munca. Vă doresc succes în dobândirea de noi cunoștințe!
P.S. Atașez o captură de ecran a câștigurilor mele din programele de afiliere. Și vă reamintesc că oricine poate câștiga bani astfel, chiar și un începător! Principalul lucru este să o faci corect, ceea ce înseamnă să înveți de la cei care deja câștigă bani, adică de la profesioniștii în afaceri pe internet.
Obțineți o listă de programe de afiliere dovedite în 2017 care plătesc bani!
Descărcați gratuit lista de verificare și bonusuri valoroase
=>>
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 la 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.
