Szöveg pozíciók

A body területén és div szakaszokban.

• Szöveg balra:text-align: left; (Böngésző programok automatikusan a balra igazítást alkalmazzák.)
• Szöveg középre:text-align: center;
• Szöveg jobbra:text-align: right;
• Szöveg, tetszés szerint: margin vagy padding " em " , " px " , " % " , értékkel határozzuk meg.

<p class="pelda001">
Szöveg balra .pelda001{text-align: left;}
Szöveg balra.</p>

<p class="pelda002">
Szöveg középre .pelda002{text-align: center;}
Szöveg középre</p>

<p class="pelda003">
Szöveg jobbra .pelda003{text-align: right;}
Szöveg jobbra </p>

<p class="pelda004">
Szöveg tetszőleges .pelda004{ margin-left: 200px;} Ez a meghatározás, a jelölőelemmel kijelölt területre vonatkozik! x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x Szöveg tetszőleges</p>

<p class="pelda005">
Szöveg tetszőleges .pelda005{ margin-right: 200px;} Ez a meghatározás, a jelölőelemmel kijelölt területre vonatkozik! x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x Szöveg tetszőleges</p>

<p class="pelda006">
Szöveg tetszőleges .pelda006{padding-left: 200px;} Ez a meghatározás, a jelölőelemmel kijelölt területen, belülre vonatkozik! x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x Szöveg tetszőleges</p>

<p class="pelda007">
Szöveg tetszőleges .pelda007{padding-right: 200px;} Ez a meghatározás, a jelölőelemmel kijelölt területen, belülre vonatkozik! x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x Szöveg tetszőleges</p>

Táblázatok celláiban.

• Szöveg fentre: th{text-align: top;} td{vertical-align: top;}
• Szöveg középre:td{text-align: center;}
• Szöveg jobbra:th, td{text-align: right;}
• Szöveg lentre:th{text-align: bottom;} td{vertical-align: bottom;}
• Szöveg balra:th{text-align: left;}

Bővebben és bemutatóval, lásd a táblázatok témakörében

Minden tömbszíntű elem, szövegbehúzás: text-indent

• Szövegrész elmozdulási értéke: százalékértékban "%", képpontban "px"
• Behúzási hossz, jobbra: pozitív értékkel ( text-ident: 5%; text-indent: 20px;)
• Kihúzási hossz, balra: negatív px értékkel ( text-indent: -20px;)
• Öröklés: inherit

<p class="behuzas">Ezzel, meghatározhatjuk a behúzás mértékét, azaz a szövegrész első sora, mennyivel kezdődjön beljebb, a további szövegsorok elejétől. .behuzas{text-indent:60px;} Ezen bekezdés első soránál is megfigyelhető, hogy az első sor, a megadott px - értéknek megfelelően beljebb kezdődik, mint a bekezdés további sorai.</p>

<p class="kihuzas">Ezzel, meghatározhatjuk a kihúzás mértékét, azaz a szövegrész első sora, mennyivel kezdődjön kijjebb, a további szövegsorok elejétől. .kihuzas{text-indent: -50px; padding-left: 60px;} Ezen bekezdés első soránál is megfigyelhető, hogy az első sor, a megadott px - értéknek megfelelően kijjebb kezdődik, mint a bekezdés további sorai.</p>

További ismertető található: A szövegformázása, és a listák készítése témakörben!