text-align

با استفاده از ویژگی text-align می توان تصمیم گرفت که چیدمان محتوای خطی (مثل متن یا تصویر) داخل یک عنصر بلاک به چه صورت باشد.

همانطور که در نرم افزارهای ویرایش متن مثل ورد می توان بر روی چیدمان نوشته کنترل داشت در سی اس اس نیز این امکان وجود دارد که با مقادیری مثل left، right، center و یا justify عناصر خطی را تراز کنیم.

به عنوان مثال در دموی زیر متن بصورت وسط چین می باشد و این کار توسط ویژگی text-align و مقدار center انجام شده است:

 

p {
  text-align: center;  
}

 

See the Pen text-align by Mojtaba Seyedi (@seyedi) on CodePen.

 

هرچند که نام ویژگی به متن اشاره دارد اما این ویژگی بر روی عناصر inline و inline-block تاثیر می گذارد.

text-align فقط بر روی محتوای عنصر تاثیر می گذارد و نه خود عنصر. مثلا برای وسط آوردن خود عنصر می توان از ویژگی margin استفاده کرد.

مقدار ویژگی text-align بر روی فرزندان عنصر نیز تاثیر خواهد گذاشت و محتوای فرزندانی که از نوع بلاک هستند نیز تحت تاثیر مقدار text-align پدرانشان قرار خواهد گرفت.

 

مقادیر text-align

تمام مقادیری که این ویژگی می تواند داشته باشد به شرح زیر هستند:

 

text-align: start | end | left | right | center | justify | match-parent 

 

تصویر زیر چهار مقدار اصلی این ویژگی را وصف می کند:

نکته مهم در مورد ویژگی text-align این است که این ویژگی مستقیما با direction یا همان جهت عنصر در ارتباط است. یعنی رفتار پیشفرض عنصر وابسته به جهت آن می باشد و می توان این رفتار را با استفاده از ویژگی text-align تغییر داد.

 

left

محتوای خطی عنصر با لبه سمت چپ آن تراز می شود.

 

right

محتوای خطی عنصر با لبه سمت راست آن تراز می شود.

 

start

اگر جهت عنصر rtl (راست به چپ) باشد، رفتار این مقدار با right یکسان خواهد بود. و اگر جهت عنصر ltr باشد رفتارش مشابه رفتار مقدار left می شود.

 

end

اگر جهت عنصر rtl (راست به چپ) باشد، رفتار این مقدار با left یکسان خواهد بود. و اگر جهت عنصر ltr باشد رفتارش مشابه رفتار مقدار right می شود.

 

center

عناصر خطی عنصر در جهت افق وسط چین خواهند شد و در مرکز قرار می گیرند.

 

justify

این مقدار باعث می شود تا برای تمام خطوط به جز خط آخر هرچه فضای خالی بین لبه سمت راست و چپ عنصر وجود دارد طوری بین کلمات توزیع شود تا محتوا سراسر خط را از لبه سمت راست تا چپ پر کند.

 

inherit

این مقدار باعث می شود تا text-align پدر عنصر هر مقداری داشته باشد به عنصر به ارث برسد اما در نهایت برای مقادیری مثل start و end که از پدر به ارث می رسد با توجه به جهت خودش تصمیم می گیرد.

 

.dad {
  direction: rtl;
  text-align: end; /* == left */
}

.dad p {
  direction: ltr;
  text-align: inherit; /* == end ==> right */
}

 

 

match-parent

این مقدار شبیه به inherit عمل می کند با این تفاوت که اگر مقدار پدر start یا end باشد text-align عنصر به جای اینکه بر مبنای جهت خودش محاسبه شود با توجه به جهت عنصر پدرش محاسبه می شود.

همان مثال بالا را برای این مقدار می نویسیم:

 

.dad {
  direction: rtl;
  text-align: end;          /* == left */
}

.dad p {
  direction: ltr;
  text-align: inherit;      /* == end ==> right */ /* محاسبه شده با توجه به جهت خود عنصر */
  text-align: match-parent; /* == end ==> left */  /* محاسبه شده با توجه به جهت پدر عنصر */
}

 

برای تست این مقدار فعلا به مرورگر فایرفاکس پناه ببرید :)

 

initial

گاهی نیاز داریم تا مقدار text-align را ریست کنیم و به مقدار اولیه آن بازگردانی کنیم. مثلا نمی خواهیم تا عنصر رفتار پدرش را داشته باشد یا اینکه مقدار قبلی که به خود عنصر در جای دیگری از کد داده شده است را باز نویسی کنیم.

برای این کار می توان از مقدار initial استفاده کرد اما باید توجه داشته باشیم که در مرورگر IE این مقدار پشتیبانی نمی شود.

 

.dad {
  text-align: center;
}

.dad p {
  /* text-align: center */
  text-align: initial; /* با توجه به جهت عنصر عمل می کند */
}

 

 

پشتیبانی مرورگر ها

مقادیر پایه ای این ویژگی در تمام مرورگرها پشتیبانی می شود. اما مقدار start و end و همینطور initial در مرورگرهای اینترنت اکسپلورر و اپراهای قدیمی کار نمی کنند.

همینطور مقدار match-parent فعلا در فایرفاکس فقط پشتیبانی می شود.

توجه داشته باشید که مقادیر start، end و match-parent فعلا مقادیر آزمایشی هستند.