خصوصیت text-align
مثال (خصوصیت text-align)
تنظیم ترازبندی عناصر h1، h2 و h3
h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}
خودتان امتحان کنید »
h2 {text-align:left}
h3 {text-align:right}
در انتهای این آموزش، مثال های بیشتری را خواهید دید.
تعریف و کاربرد
با استفاده از خصوصیت text-align می توان ترازبندی افقی نوشته ها در یک عنصر را مشخص کرد.
| مقدار پیشفرض |
چپ در صورتی که جهت ltr باشد و راست در صورتی که جهت rtl باشد |
|---|---|
| ارث بری | بله |
| نسخه | CSS1 |
| JavaScript ساختار | object.style.textAlign="right" |
پشتیبانی مرورگرها
تمام مرورگرهای اصلی، خصوصیت text-align را پشتیبانی می کنند.
توجه: مرورگر Internet Explorer 7 و نسخه های قبلی آن، مقدار "inherit" را پشتیبانی نمی کند. IE8 به !DOCTYPE! نیاز دارد. IE9 مقدار "inherit" را پشتیبانی می کند.
مقدارهای خصوصیت
| مقدار | توضیحات | نمایش دادن |
|---|---|---|
| left |
نوشته ها در سمت چپ تراز می شوند. |
نمایش دادن » |
| right |
نوشته ها در سمت راست تراز می شوند. |
نمایش دادن » |
| center |
نوشته ها در وسط قرار می گیرند. |
نمایش دادن » |
| justify |
خطوط را می کشد تا تمام خط ها عرض یکسانی داشته باشند (مشابه روزنامه ها و مجله ها) |
نمایش دادن » |
| inherit | تعیین می کند که باید از والدش، ارث بری داشته باشد. |
مثال - خودتان امتحان کنید
More advanced text-align example
این مثال یک مثال پیشرفته از ترازبندی متن را نمایش می دهد.
بیاموزهای مرتبط
CSS Align (بیاموز CSS)
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 9551
دیدگاه‌ها
سلام، چرا خصوصیت text-align برای من اعلام نمی شه؟
سلام، خصوصیت text-align برای عناصر block قابل استفاده است.
یک عنصر block عنصری است که تمام طول یک سطر را اشغال می کند و قبل و بعد از آن یک سطر وجود دارد.
مثال برای عناصر Block:
- p
- h1
- div
بعنوان مثال عنصر span یک عنصر inline است و نمی توان برای آن از خصوصیت text-align استفاده نمود.
در ضمن عنصر inline عنصری است که به اندازه ی محتوایی که دارد، طول یک سطر را اشغال می کند.