:ﺪﺷ ﺪﯿﻫﺍﻮﺧ ﺎﻨﺷﺁ ﺮﯾﺯ ﺹﺍﻮﺧ ﺎﺑ ﻞﺼﻓ ﻦﯾﺍ ﺭﺩ
text-aligntext-align-lastdirectionunicode-bidivertical-align.ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﻦﺘﻣ ﮏﯾ ﯽﻘﻓﺍ ﺯﺍﺮﺗ ﻢﯿﻈﻨﺗ ﯼﺍﺮﺑ text-ali
.ﺩﻮﺷ ﻪﯿﺟﻮﺗ ﺎﯾ ﻂﺳﻭ ،ﺖﺳﺍﺭ ﺎﯾ ﭗﭼ ﺯﺍﺮﺗ ﺪﻧﺍﻮﺗ ﯽﻣ ﻦﺘﻣ ﮏﯾ
ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﺍﺭ ﺖﺳﺍﺭ ﻭ ﭗﭼ ﺯﺍﺮﺗ ﻦﺘﻣ ﻭ ﻂﺳﻭ ﺯﺍﺮﺗ ﺮﯾﺯ ﻝﺎﺜﻣ
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
</style>
</head>
<body>
<h1>Heading 1 (center)</h1>
<h2>Heading 2 (left)</h2>
<h3>Heading 3 (right)</h3>
<p>The three headings above are aligned center, left and right.</p>
</body>
</html>
ﻂﺧ ﺮﻫ ،ﺩﻮﺷ ﻢﯿﻈﻨﺗ "juustify" ﯼﻭﺭ text-align ﯽﮔ
div {
text-align: justify;
}→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
padding: 10px;
width: 200px;
height: 200px;
text-align: justify;
}
</style>
</head>
<body>
<h1>Example text-align: justify</h1>
<p>The text-align: justify; value stretches the lines so that each line has equal width (like in newspapers and magazines).</p>
<div>
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'
</div>
</body>
</html>
.ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﻦﺘﻣ ﮏﯾ ﻂﺧ ﻦﯾﺮﺧﺁ ﻥﺩﺮﮐ ﺯﺍﺮﺗ ﻩﻮﺤﻧ text-
:ﺪﯿﻨﮐ ﺯﺍﺮﺗ <p> ﺮﺼﻨﻋ ﻪﺳ ﺭﺩ ﺍﺭ ﻦﺘﻣ ﻂﺧ ﻦﯾﺮﺧﺁ
p.a
{
text-align-last: right;
}
p.b
{
text-align-last: center;
}
p.c
{
text-align-last: justify;
}→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<head>
<style>
p.a {
text-align-last: right;
}
p.b {
text-align-last: center;
}
p.c {
text-align-last: justify;
}
</style>
</head>
<body>
<h1>The text-align-last Property</h1>
<h2>text-align-last: right:</h2>
<p class="a">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
<h2>text-align-last: center:</h2>
<p class="b">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
<h2>text-align-last: justify:</h2>
<p class="c">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
</body>
</html>
ﺖﻬﺟ ﻭ
p {
direction: rtl;
unicode-bidi: bidi-override;
}→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
direction: rtl;
unicode-bidi: bidi-override;
}
</style>
</head>
<body>
<p>This is the default text direction.</p>
<p class="ex1">This is right-to-left text direction.</p>
</body>
</html>
.ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﺍﺭ ﺮﺼﻨﻋ ﮏﯾ ﯼﺩﻮﻤﻋ ﺯﺍﺮﺗ :ﺪﯿﻨﮐ ﻢﯿﻈﻨﺗ ﻦﺘﻣ ﮏﯾ ﺭﺩ ﺍﺭ ﺮﯾﻮﺼﺗ ﮏﯾ ﯼﺩﻮﻤﻋ ﺯﺍﺮﺗ → ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﻦﺘﺷﻮﻧ ﺖﻬﺟ/ﻦﺘﻣ ﺖﻬﺟ ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﻦﺘﻣ ﯽﻘﻓﺍ ﺯﺍﺮﺗ ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﻦﺘﻣ ﮏﯾ ﻂﺧ ﻦﯾﺮﺧﺁ ﻥﺩﺮﮐ ﺯﺍﺮﺗ ﻩﻮﺤﻧ .ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﻪﻧ ﺎﯾ ﺩﻮﺷ ﻪﺘﻓﺮﮔ ﻩﺪﯾﺩﺎﻧ ﺪﻨﺳ ﮏﯾ ﺭﺩ ﻥﺎﺑﺯ ﻦﯾﺪﻨﭼ ﺯﺍ ﯽﻧﺎﺒﯿﺘﺸﭘ ﯼﺍﺮﺑ ﺪ ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﺍﺭ ﺮﺼﻨﻋ ﮏﯾ ﯼﺩﻮﻤﻋ ﺯﺍﺮﺗvertical-align ﻝﺎﺜﻣ
img.a {
vertical-align: baseline;
}
img.b {
vertical-align: text-top;
}
img.c {
vertical-align:
text-bottom;
}
img.d {
vertical-align: sub;
}
img.e {
vertical-align: super;
}<!DOCTYPE html>
<html>
<head>
<style>
img.a {
vertical-align: baseline;
}
img.b {
vertical-align: text-top;
}
img.c {
vertical-align: text-bottom;
}
img.d {
vertical-align: sub;
}
img.e {
vertical-align: super;
}
</style>
</head>
<body>
<h1>The vertical-align Property</h1>
<h2>vertical-align: baseline (default):</h2>
<p>An <img class="a" src="sqpurple.gif" width="9" height="9"> image with a default alignment.</p>
<h2>vertical-align: text-top:</h2>
<p>An <img class="b" src="sqpurple.gif" width="9" height="9"> image with a text-top alignment.</p>
<h2>vertical-align: text-bottom:</h2>
<p>An <img class="c" src="sqpurple.gif" width="9" height="9"> image with a text-bottom alignment.</p>
<h2>vertical-align: sub:</h2>
<p>An <img class="d" src="sqpurple.gif" width="9" height="9"> image with a sub alignment.</p>
<h2>vertical-align: sup:</h2>
<p>An <img class="e" src="sqpurple.gif" width="9" height="9"> image with a super alignment.</p>
</body>
</html>
CSS Text Alignment/Direction Properties