U programima kao što je, na primjer, Microsoft Word, vjerojatno ste naišli na alate za horizontalno poravnavanje teksta. Tekst možete poravnati lijevo ili desno, središte ili širinu. Isto je i u CSS-u - poravnavanje teksta se vrši pomoću svojstva text-align i odgovarajućih vrijednosti koje su prikazane u tablici:
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 europskim se 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. Vrijednost justify Justify text u CSS-u može se primijeniti na ispisane verzije stranica, ali se ne preporučuje da se zanosite ovim stilom na web stranicama dizajniranim za gledanje na monitoru. Zašto? Na prvi pogled opravdani tekst izgleda lijepo i ravnomjerno, kao kolumna u novinama. No, kako bi se tekst na ovaj način rastezao, preglednik mora dodati dodatni razmak između riječi, zbog čega se u tekstu mogu stvoriti ružni praznini koji otežavaju čitanje. U programima dizajniranim za pripremu podataka za ispis, postoji mnogo finije podešavanje razmaka u tekstu, a također se često koristi prelamanje riječi, što nije dostupno u mnogim preglednicima. Stoga morate provjeriti kako na web stranicama izgleda širino poravnati tekst i prije svega si postaviti pitanje: je li lako čitljiv? To se posebno odnosi na uske blokove teksta (uključujući mobilne verzije stranica). Početne i završne vrijednosti Početne i završne vrijednosti za svojstvo poravnanja teksta 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 - s lijeva na desno), poravnanje će biti poravnato slijeva (sukladno, za tekst koji ide s desna na lijevo (RTL - zdesna nalijevo ), poravnanje će biti ispravno) ... Logično, krajnja vrijednost radi na suprotan način (odnosno, desno poravna LTR tekst, a lijevo RTL tekst). Ove dvije vrijednosti ne podržavaju neki preglednici, uključujući Internet Explorer, stoga preporučujemo korištenje lijeve i desne vrijednosti osim ako postoji hitna potreba za njihovom upotrebom.Snimke zaslona pokazuju primjere korištenja različitih vrijednosti za CSS svojstvo za poravnavanje teksta:
Snimka zaslona 1: Lijevo poravnavanje LTR teksta pomoću početne vrijednosti. Sličan izgled može se postići lijevom vrijednošću. 
Snimka zaslona 2: Desno poravnanje LTR teksta pomoću krajnje vrijednosti. Sličan izgled može se postići s pravom vrijednosti. 
Snimka zaslona 3: Poravnavanje teksta po širini. Uz mali ispis i veliku širinu stranice/bloka, ova opcija za poravnavanje teksta na web stranici izgleda prihvatljivo. 
Snimka zaslona 4: Povećana veličina fonta i smanjena širina bloka u usporedbi s prethodnim primjerom. Kao što vidite, u tekstu su se pojavile ružne praznine (podvučene crvenom crtom). 
Snimka zaslona 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 oba stupca kako biste utvrdili koja je verzija udobnija za čitanje.
U slučaju HTML dokumenata, oznake više služe za označavanje sadržaja nego za označavanje načina na koji bi se trebao predstaviti. Veća kontrola nad prezentacijom postiže se stilovima. U ovom članku pogledat ću stilove koji su povezani s oblikovanjem odlomka u HTML-u.
Označiti
U HTML-u vam omogućuje postavljanje odlomaka, a atribut align ih poravnava ulijevo, desno, središte ili širinu. Osim ovih, koristit ćemo atribut globalnog stila.
Poravnajte odlomak
Odlomak možete poravnati pomoću atributa align sa sljedećim vrijednostima:
poravnanje teksta: lijevo | desno | središte | opravdati | početno | naslijediti;
Kopirajte sljedeći kod u svoju .html datoteku.
Ovaj odlomak je centriran
Ovaj odlomak je poravnat udesno
Ovaj se odlomak prikazuje poravnato u prozoru preglednika. Odlomak podijeljene širine poravnat je udesno i poravnat lijevo dodavanjem dodatnih razmaka. Možete vidjeti da se rubovi paragrafa poravnatog po širini podudaraju s rubovima lijevo poravnatih i desnih odlomaka. U lijevo poravnatom odlomku lijevi rub je ravan, a u odlomku koji je poravnat desno, desni. Možete li vidjeti da ovaj odlomak ima oba glatka ruba? To se postiže zahvaljujući text-align: justify stilu.
U prozoru preglednika HTML kod za odlomak izgleda ovako.
Razmak između redova
Možete kontrolirati razmak između odlomka sa stilom = line-height. Koristite atribut stila sa sljedećim vrijednostima:
visina linije: normalna | broj | duljina | početna | naslijediti;
Ispod je primjer HTML koda koji daje odlomke s različitim razmacima između redaka:
Ovaj paragraf koristi dvije vrijednosti za atribut stila. Prva visina reda: 1.5 određuje jedan i pol razmak između redaka za odlomak, a druga vrijednost text-align: justify specificira da tekst u odlomku treba biti poravnat.
Ovaj odlomak ima dvostruki razmak i opravdan. line-height: 2 definira dvostruki razmak. Atribut stila ne mora imati dvije vrijednosti. Ali ako trebate navesti dvije vrijednosti, to možete učiniti tako da ih odvojite točkom i zarezom.
Evo nekoliko različitih načina za korištenje vrijednosti visine linije za atribut stila:
: Postavlja razmak između redaka na 13 piksela;
: Postavlja HTML razmak odlomaka na 200% u odnosu na trenutnu veličinu fonta;
: Postavlja visinu linije na 14 piksela.
Uvlačenje
Koristio sam izraz "udubljenje" kako bih ga lakše razumio. Ali u HTML-u koristimo praznine za stvaranje bijelog prostora oko objekta. Možete upotrijebiti atribut stila s vrijednošću dopuna za uvlačenje odlomka lijevo ili desno.
Slijedi primjer paragrafa uvučenih lijevo i desno:
Ovaj stavak nije uvučen, samo je opravdan. Pogledajte atribut stila elementa P za ovaj odlomak.
Za ovaj odlomak postavio sam lijevi padding na 30px koristeći stil padding-left: 30px. Također je ovaj odlomak 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 točkom i zarezom.
I ovaj odlomak je uvučen udesno za 30 piksela, ali nije uvučen ulijevo. Također je opravdana širinom. Vrijednost 'padding-right' atributa stila specificira padding s desne strane. Ako ne vidite učinak, smanjite širinu prozora preglednika tako da se opravdani HTML odlomak prikazuje prema očekivanjima.
Uvlaka između pasusa (uvlaka prije i uvlaka poslije stavka)
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 iza odlomka, koji djeluje kao uvlaka na vrhu ili na dnu. Pogledajte donji primjer oznake
Postavio sam prvi odlomak HTML-a da ima padding od 10 piksela prije drugog i 50 piksela nakon drugog odlomka:
Ovaj stavak nije uvučen ni prije ni poslije. Ovo je redoviti, opravdani stavak. Kao što već znate, možemo poravnati odlomak do njegove širine pomoću koda style = ”text-align: justify” unutar oznake.
Ovaj paragraf je izostavljen. Također je podstavljen 10 piksela prije odlomka i 50 piksela poslije. Unutar oznake postavio sam 3 stila.
Ovo je redoviti odlomak bez uvlaka i sa zadanim poravnanjem.
Stvari koje treba zapamtiti
- HTML odlomak može se poravnati pomoću atributa align ili stila za poravnavanje teksta;
- HTML će se prikazati drugačije ovisno o veličini zaslona, veličini prozora preglednika;
- Dodavanje dodatnih razmaka ili praznih redaka u HTML ne utječe na izlaz. Preglednik uklanja sve dodatne razmake;
- Oznake definiraju što treba biti prikazano, a stilovi definiraju kako se treba prikazati;
- Stilovi se mogu specificirati na tri različita načina - inline (unutarnje oznake), interni ( unutar iste HTML datoteke pomoću elementa