Nyitó

Gyorstalpaló

Tervezés

HTML

CSS

Sablonok

Bevezetés

Szintaktika

Doboz modell

Pozicionálás

Szöveg formázása

Színek

Méretek

Táblázatok

Listák

Szöveg formázása - Szöveg igazítás (text-align) tulajdonság

A text-align tulajdonság segítségével lehet beállítani egy blokkszerű elemen belül a szöveg igazítást vízszintes irányban.

Lehetséges értékek:
  • left: balra igazítás
  • right: jobbra igazítás
  • center: középre igazítás
  • justify: sorkizárt
  • inherit: érték a szülő elemtől örökölve

Automatikus öröklődés: Igen

Az alapérték függhet a böngészőtől és a dokumentum nyelvétől is. Balról jobbra szövegirány esetén az alapérték általában left, míg jobbról balra olvasott (például héber nyelvű) dokumentum alapértéke right.

A tulajdonság értékek jelentése ugyan az, mint amit a szövegszerkesztőkben is megszoktunk. Arra viszont figyelnünk kell, hogy a webes dokumentumokban a sorkizárás problémásabb, mint egy szövegszerkesztőben, mert a megjelenítés körülményei sokkal bizonytalanabbak (képernyő mérete, felbontása, stb.) Ha a rendelkezésre álló szélesség kicsi a betűmérethez képest, akkor lesznek olyan sorok, amelyekben zavaróan nagyok lesznek a szóközök. Másrészt, ha nem alkalmazunk sorkizárást, akkor egy terjedelmesebb szöveg nem mutat szépen a képernyőn. A problémára nincs jó megoldás. Ha hosszabb szöveget írsz, akkor neked kell eldöntened, hogy alkalmazol-e sorkizárást a megfelelő összkép érdekében, vállalva a túlságosan szellős sorok kockázatát, vagy inkább balra igazított szöveget definiálsz, aminek a jobb széle nem egyenes.

A text-align tulajdonságot nem csak szöveg igazítására lehet használni. Egy blokkon belül minden sorszerű elem vízszintes irányú pozicionálása megoldható vele. A következő példában egy fényképet igazítottam a jobb oldalra a rendelkezésre álló helyen belül. A <div> tag zöld háttere jelzi az elfoglalt területet.

<div style="text-align: right; background-color: #00ff00">
   <img src="tulip.jpg" width="230" height="310"
   alt="Tulipán" title="Tulipán"></div>

Ami így jelenik meg:

Tulipán

Szöveg behúzás (text-indent) tulajdonság »