این آموزش در تاریخ ۱۴۰۱/۰۹/۱۳ آپدیت شده است.
آموزش ویژگی text-align در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی text-align در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی text-align در CSS
با استفاده از ویژگی text-align در CSS که از پراستفاده ترین ویژگی های CSS می باشد، میتوان تراز متن / محتوا را بصورت افقی در یک صفحه وب مشخص و یا تعریف کرد.
این ویژگی بروی تگ های اینلاینی یا Inline تاثیری ندارد و فقط بروی تگ های بلاکی عمل میکند.
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی text-align را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : قرار دادن متن در سمت چپ ، وسط و راست صفحه
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<style> .m1{ text-align:left; } .m2{ text-align:center; } .m3{ text-align:right; } </style> |
مثال شماره ۲ : خب تگ img یک تگ اینلاینی هستش و گفتم ویژگی text-align روی تگ های اینلاینی اثر نداره، پس عکس رو میزاریم داخل تگ div بعدش به تگ div میگیم text-align وسط باشه
|
1 2 3 4 5 6 7 |
<style> .MyImage{ text-align:center; } </style> |
مثال شماره ۳ : استفاده از مقدار justify ( سعی میکنه کل فضای سطر رو بپوشونه که فضای خالی وجود نداشته باشه )
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> .Text-1{ text-align: left; } .Text-2{ text-align: justify; } </style> |
Free-Learn
جدول مشخصات ویژگی text-align در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | left هم right هم |
|---|---|
| قابل ارث بری | دارد | اطلاعات بیشتر |
| قابل متحرک سازی | ندارد | اطلاعات بیشتر |
| نسخه | CSS1 |
| نحوه استفاده در جاوااسکریپت | object.style.textAlign=”center”; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی text-align در CSS پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| text-align | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
|
1 |
text-align: left|right|center|justify|initial|inherit; |
Free-Learn
جدول مقادیر ویژگی text-align در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| left | اگر جهت صفحه rtl بود مقدار پیش فرض میشه right و اگه ltr بود مقدار پیش فرض میشه left |
| right | تراز متن در سمت راست صفحه ( بصورت افقی ) |
| center | تراز متن در وسط صفحه ( بصورت افقی ) |
| justify | سعی میکند متن رو بطور کامل فیت باکس کنه و فضاهای خالی را بپوشاند |
| initial | استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر |
| inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
نکات و توضیحات
- جهت صفحه که با استفاده از ویژگی direction یا صفت dir مشخص میشود، اگر rtl بود یعنی راست به چپ پس مقدار پیش فرض ویژگی text-align میشه right و اگه ltr بود یعنی چپ به راست مقدار پیش فرض میشه left
