مثال (خصوصیت 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)
یک عنصر block عنصری است که تمام طول یک سطر را اشغال می کند و قبل و بعد از آن یک سطر وجود دارد.
مثال برای عناصر Block:
- p
- h1
- div
بعنوان مثال عنصر span یک عنصر inline است و نمی توان برای آن از خصوصیت text-align استفاده نمود.
در ضمن عنصر inline عنصری است که به اندازه ی محتوایی که دارد، طول یک سطر را اشغال می کند.