ویژگی text-align CSS
- صف قبل table-layout
- صفحه بعدی text-align-last
تعریف و استفاده
ویژگی text-align روش ترازگذاری افقی متن در یک عنصر را مشخص می‌کند.
این ویژگی با مشخص کردن که خطوط متن با کدام نقطه تراز می‌شوند، روش ترازگذاری افقی متن در عناصر بلوکی را تنظیم می‌کند. با اجازه دادن به کاربر برای تنظیم فاصله بین حروف و کلمات در محتوای خط، می‌توان از مقدار justify پشتیبانی کرد؛ نتایج مختلفی ممکن است توسط کاربران مختلف دریافت شود.
لطفاً به:
آموزش CSS:متنی CSS
دستورالعمل HTML DOM:ویژگی textAlign
مثال
نحوه تنظیم روش ترازگذاری متن برای عناصر h1، h2، h3:
h1 {text-align:center;}
h2 {text-align:left;}
h3 {text-align:right;}
نحوه استفاده از CSS
text-align: left|right|center|justify|initial|inherit;
مقدار ویژگی
| مقدار | توضیحات |
|---|---|
| left | متن را به چپ قرار دهید. مقدار پیش‌فرض: توسط مرورگر تعیین می‌شود. |
| right | متن را در سمت راست قرار می‌دهد. |
| center | متن را در وسط قرار می‌دهد. |
| justify | برای ایجاد اثر متن دوطرفانه استفاده می‌شود. |
| inherit | مقدار text-align از پدر باید ارث برده شود. |
مقدار justify
آخرین ویژگی هماهنگی افقی justify است که مشکلات خود را دارد.
مقدار justify می‌تواند باعث شود که هر دو سمت متن در دو سمت چپ و راست پدر قرار گیرند. در متن‌های دوطرفانه، هر دو سمت ردیف‌های متن در لبه‌های داخلی پدر قرار می‌گیرند. سپس، فضای بین کلمات و حروف را تنظیم می‌کنند تا طول هر ردیف دقیقاً یکسان باشد. ممکن است شما متوجه شده باشید که متن‌های دوطرفانه در حوزه چاپ بسیار رایج هستند. با این حال، در CSS، نیاز به توجه بیشتری دارد.
应由用户代理（而不是CSS）确定如何拉伸两端对齐文本以填充父元素左右边界之间的空间。例如，برخی مرورگرها ممکن است تنها فضای اضافی بین کلمات را افزایش دهند، در حالی که برخی دیگر ممکن است فضای اضافی بین حروف را به صورت برابر توزیع کنند (البته، استاندارد CSS به ویژه اشاره می‌کند که اگر ویژگی letter-spacingیک مقدار طولی مشخص می‌کند که "کاربران代理人 نمی‌توانند فضای بین حروف را بیشتر یا کمتر کنند"). برخی کاربران代理人 ممکن است فضای برخی از ردیف‌ها را کاهش دهند تا متن‌ها باریک‌تر شوند. همه این روش‌ها می‌توانند ظاهر عنصر را تحت تأثیر قرار دهند و حتی ارتفاع آن را تغییر دهند، بسته به اینکه انتخاب‌های هماهنگی کاربران代理人 چقدر بر تعداد ردیف‌های متن تأثیر می‌گذارد.
CSS نیز نحوه مدیریت حروف منفی را مشخص نکرده است (نکته 1). بیشتر متن‌های دوطرفانه از حروف منفی برای تقسیم کلمات بلند در دو ردیف مختلف استفاده می‌کنند تا فضای بین کلمات را کوچکتر کرده و ظاهر ردیف‌های متن را بهبود بخشند. با این حال، به دلیل اینکه CSS رفتار حروف منفی را تعریف نکرده است، کاربران به احتمال زیاد خودکارانه حروف منفی را اضافه نمی‌کنند. بنابراین، در CSS، متن‌های دوطرفانه به نظر نمی‌رسند که به خوبی چاپ می‌شوند، به ویژه اگر عناصر ممکن است خیلی باریک باشند و تنها چند کلمه در هر ردیف قرار گیرند. البته، استفاده از عناصر طراحی باریک ممکن است، اما باید به معایب آن توجه داشت.
نکته 1:در CSS روشی برای مدیریت حروف منفی توضیح داده نشده است، زیرا قوانین حروف منفی در زبان‌های مختلف متفاوت است. استاندارد سعی نکرده است تا این قوانین ممکن‌الانتفاعی را یکپارچه کند، بلکه به سادگی این مسئله را مطرح نکرده است.
جزئیات فنی
| مقدار پیش‌فرض: | اگر ویژگی direction ltr باشد، مقدار پیش‌فرض left است؛ اگر direction rtl باشد، مقدار پیش‌فرض right است. |
|---|---|
| انتقال‌پذیری: | بله |
| نسخه: | CSS1 |
| قوانین جاوااسکریپت: | اجسام.style.textAlign="right" |
مثال‌های بیشتر
- جابجایی متن
- این مثال نشان می‌دهد که چگونه می‌توان متن را جابجا کرد.
پشتیبانی مرورگر
اعداد در جدول نشان‌دهنده نسخه اولین مرورگر هستند که از این ویژگی کامل پشتیبانی می‌کند.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 1.0 | 3.0 | 1.0 | 1.0 | 3.5 |
- صف قبل table-layout
- صفحه بعدی text-align-last
