U programima kao što je, na primjer, Microsoft Word, vjerovatno ste naišli na alate za horizontalno poravnanje teksta. Tekst možete poravnati lijevo ili desno, po sredini ili po širini. Isto važi i za CSS - poravnavanje teksta se vrši korišćenjem svojstva text-align i odgovarajućih vrednosti koje su prikazane u tabeli:
Primjer pisanja stila:
P (poravnanje teksta: lijevo;)
Lijevo, desno i središnje vrijednosti Lijevo poravnat tekst gotovo uvijek izgleda dobro na web stranicama i lako se čita. Desno poravnanje u evropskim jezicima obično se rijetko koristi, ali se ne može nazvati potpuno beskorisnim: ovaj stil je koristan za lijepo oblikovanje naslova na fotografijama ili citatima, poravnavanje sadržaja ćelija tablice ili malih fragmenata teksta. Centar vrijednosti se često koristi u istu svrhu. Justify vrijednost Justify text u CSS-u može se primijeniti na štampane verzije stranica, ali se ne preporučuje da se zanosite ovim stilom na web stranicama dizajniranim da se gledaju na monitoru. Zašto? Na prvi pogled opravdani tekst izgleda lijepo i ravnomjerno, kao kolumna u novinama. Ali da bi se tekst razvukao na ovaj način, pretraživač mora dodati dodatni razmak između riječi, zbog čega se u tekstu mogu formirati ružne praznine koje otežavaju čitanje. U programima dizajniranim za pripremu podataka za štampanje, postoji mnogo finije podešavanje razmaka u tekstu, a često se koristi i prelamanje reči, što nije dostupno u mnogim pretraživačima. Stoga morate provjeriti kako tekst poravnat po širini izgleda na web stranicama i prije svega postaviti sebi pitanje: je li lako čitljiv? Ovo posebno vrijedi za uske blokove teksta (uključujući mobilne verzije stranica). Početne i krajnje vrijednosti Početne i krajnje vrijednosti za svojstvo text-align ugrađene su u CSS3 i rade na isti način kao lijevo i desno, ali postoji razlika. Primjenom početne vrijednosti na tekst koji ide s lijeva na desno (LTR - slijeva na desno), poravnanje će biti poravnato slijeva (prema tome, za tekst koji ide s desna na lijevo (RTL - zdesna nalijevo ), poravnanje će biti ispravno) ... Logično, krajnja vrijednost radi na suprotan način (tj. desnim poravna LTR tekst, a lijevom RTL tekstom). Ove dvije vrijednosti ne podržavaju neki pretraživači, uključujući Internet Explorer, pa preporučujemo korištenje lijeve i desne vrijednosti osim ako postoji hitna potreba da ih koristite.Snimke ekrana pokazuju primjere korištenja različitih vrijednosti za CSS svojstvo za poravnavanje teksta:
Snimak ekrana 1: Lijevo poravnavanje LTR teksta pomoću početne vrijednosti. Sličan izgled se može postići lijevom vrijednošću. 
Snimak ekrana 2: Desno poravnanje LTR teksta pomoću krajnje vrijednosti. Sličan izgled se može postići s pravom vrijednosti. 
Snimak ekrana 3: Poravnavanje teksta po širini. Sa malim ispisom i velikom širinom stranice/bloka, ova opcija za poravnavanje teksta na web stranici izgleda prihvatljivo. 
Snimak ekrana 4: Povećana veličina fonta i smanjena širina bloka u odnosu na prethodni primjer. Kao što vidite, pojavile su se ružne praznine u tekstu (podvučene crvenom linijom). 
Snimak ekrana 5: Dva načina za poravnavanje teksta u mobilnoj verziji našeg vodiča (lijevo - poravnavanje teksta: lijevo, desno - poravnavanje teksta: poravnavanje). Pokušajte pročitati tekst u obje kolone kako biste utvrdili koja je verzija udobnija za čitanje.
U slučaju HTML dokumenata, oznake više rade na označavanju sadržaja nego na označavanju načina na koji treba biti predstavljen. Više kontrole nad prezentacijom postiže se stilovima. U ovom članku ću pogledati stilove koji su povezani s formatiranjem pasusa u HTML-u.
Tag
U HTML-u vam omogućava postavljanje pasusa, a atribut align ih poravnava lijevo, desno, centar ili širinu. Pored ovih, koristićemo atribut globalnog stila.
Poravnajte pasus
Možete poravnati paragraf koristeći atribut align sa sljedećim vrijednostima:
text-align: lijevo | desno | centar | opravdati | inicijal | naslijediti;
Kopirajte sljedeći kod u svoju .html datoteku.
Ovaj paragraf je centriran
Ovaj paragraf je poravnat udesno
Ovaj paragraf se prikazuje poravnato u prozoru pretraživača. Paragraf podijeljene širine je poravnat udesno i poravnat lijevo dodavanjem dodatnih razmaka. Možete vidjeti da se rubovi pasusa poravnatog po širini poklapaju sa ivicama lijevo poravnatih i desno poravnatih pasusa. U lijevo poravnatom pasusu, lijeva ivica je ravna, a u desnom pasusu desna. Možete li vidjeti da ovaj pasus ima obje glatke ivice? To se postiže zahvaljujući stilu text-align: justify.
U prozoru pretraživača, HTML kod za pasus izgleda ovako.
Prored
Možete kontrolirati razmak između pasusa sa stilom = line-height. Koristite atribut style sa sljedećim vrijednostima:
visina linije: normalna | broj | dužina | početna | naslijediti;
Ispod je primjer HTML koda koji daje paragrafe s različitim razmacima između redova:
Ovaj paragraf koristi dvije vrijednosti za atribut stila. Prva visina reda: 1.5 specificira jedan i po prored za pasus, a druga vrijednost text-align: justify specificira da tekst u pasusu treba biti poravnat.
Ovaj pasus je dvostruko razmaknut i opravdan. line-height: 2 definira dvostruki razmak. Atribut style ne mora imati dvije vrijednosti. Ali ako trebate navesti dvije vrijednosti, to možete učiniti tako što ćete ih odvojiti tačkom i zarezom.
Evo nekoliko različitih načina za korištenje vrijednosti visine linije za atribut stila:
: Postavlja razmak između redova na 13 piksela;
: Postavlja razmak HTML pasusa na 200% u odnosu na trenutnu veličinu fonta;
: Postavlja visinu linije na 14 piksela.
Udubljenje
Koristio sam izraz "udubljenje" da bih ga lakše razumio. Ali u HTML-u koristimo praznine za stvaranje bijelog prostora oko objekta. Možete koristiti atribut stila sa vrijednošću dopuna da biste uvukli pasus lijevo ili desno.
Slijedi primjer paragrafa uvučenih lijevo i desno:
Ovaj paragraf nije uvučen, samo je opravdan. Pogledajte atribut stila elementa P za ovaj paragraf.
Za ovaj pasus, postavio sam lijevi padding na 30px koristeći stil padding-left: 30px. Također, ovaj pasus je poravnat po širini korištenjem text-align: justify stila. Kao što već znate, možemo koristiti više vrijednosti za atribut Style, odvajajući ih tačkom i zarezom.
I ovaj pasus je uvučen udesno za 30 piksela, ali nije uvučen ulijevo. Opravdano je i po širini. Vrijednost 'padding-right' atributa stila specificira padding s desne strane. Ako ne vidite efekat, smanjite širinu prozora pretraživača tako da se opravdani HTML paragraf prikazuje kako se očekuje.
Uvlaka između pasusa (uvlaka prije i uvlaka poslije pasusa)
U HTML-u ili CSS-u, ovo nam ne treba. Možemo samo odrediti stil dopuna za element
Padding-top i padding-bottom daju bijeli prostor prije i poslije pasusa, koji djeluje kao uvlaka na vrhu ili na dnu. Pogledajte primjer oznake ispod
Postavio sam prvi pasus HTML-a da ima padding od 10 piksela prije drugog i 50 piksela nakon drugog pasusa:
Ovaj paragraf nije uvučen ni prije ni poslije. Ovo je redovan, opravdan paragraf. Kao što već znate, možemo poravnati pasus do njegove širine pomoću koda style = ”text-align: justify” unutar oznake.
Ovaj paragraf je izbačen. Također je podstavljen 10 piksela prije pasusa i 50 piksela poslije. Unutar oznake sam postavio 3 stila.
Ovo je običan pasus bez uvlaka i sa zadanim poravnanjem.
Stvari koje treba zapamtiti
- HTML paragraf se može poravnati pomoću atributa align ili stila za poravnavanje teksta;
- HTML će biti prikazan različito u zavisnosti od veličine ekrana, veličine prozora pretraživača;
- Dodavanje dodatnih razmaka ili praznih linija u HTML ne utiče na izlaz. Pretraživač uklanja sve dodatne prostore;
- Oznake definišu šta treba da bude prikazano, a stilovi definišu kako treba da bude prikazano;
- Stilovi se mogu specificirati na tri različita načina - inline (unutarnje oznake), interni ( unutar iste HTML datoteke koristeći element