cssblog.ir logo
P

text-align

تراز نمودن متن از سمت راست، وسط، چپ و هر دو طرف (justify)

این مشخصه نحوه (مبنای) تراز بودن بودن محتوا را تعیین می‌کند. یعنی از طریق آن تعیین می‌کنیم که مبنای تنظیم شدن متن (محتوا) عنصر کدام سمت باشد

این مشخصه نحوه (مبنای) تراز بودن بودن محتوا را تعیین می‌کند. نکته مهم درباره استفاده از این مشخصه این است که عنصری که روی آن text-align تنظیم می کنیم باید بلوکی (display: block) باشد.

برای مثال: وسط چین کردن متن

 لیست مقادیر

مقادیر قابل استفاده برای مشخصه text-alignقابل مشاهده می باشد.

چپ - left

اگر بخواهیم مبنای تراز شدن محتوا از سمت چپ باشد از این مقدار استفاده می کنیم. در هنگام استفاده از جهت (direction) چپ به راست، بصورت پیشفرض مبنای تراز از سمت چپ خواهد بود.

p {
	text-align: left;
}

راست - right

مبنای تراز را سمت راست قرار می‌دهد. در قسمت‌های دارای جهت (direction) راست به چپ (rtl) مبنا بصورت پیشفرض روی سمت راست است.

p {
	text-align: right;
}

وسط - center

تراز شدن محتوا از وسط آن فضا انجام می شود.

p {
	text-align: center;
}

تراز از دو طرف - justify

این مشخصه مانند آنچه که در نرم افزارهای ویرایشگر متن مانند وُرد مشاهده کرده‌اید عمل می کند و هم از سمت راست و هم از سمت چپ محتوا را تنظیم می کند.

این مشخصه معمولا برای متون فارسی کاربرد زیادی دارد و در اغلب وبسایت های فارسی متن صفحات justify می‌شود.

p {
	text-align: justify;
}

به ارث بردن - inherit

عنصر از والد خود مقدار text-alignرا به ارث می برد.

مثال:

div {
	text-align: center;
}
div p {
	text-align: inherit;
}

نکته بسیار مهم

همانطور که تاکنون مشاهده نمودید، تا اینجا از واژه «محتوا» بجای «متن» استفاده شده است و دلیل آن این است که مشخصه text-alignروی عناصری که display آنها برابرinline یا inline-blockهست تاثیر می‌گذارد. به همین دلیل هروقت که از text-alignاستفاده می کنیم لزوما به دنبال تراز کردن متن نیستیم.

برای مثال: این دکمه با استفاده از این مشخصه در وسط قرار گرفته است.

دو مقدار start و  end

همانطور که در بالا و در توضیحdirection گفته شد مشخصه direction روی text-alignتاثیر می‌گذارد و برایltr سمت چپ مبنای تراز و برایrtl سمت راست مبنای تراز خواهد بود. اما اگر text-alignیک عنصر برابر باleft یا راست تعیین شده باشد با تغییرdirection عنصر، text-alignآن تغییر نخواهد کرد که ممکن است این رفتار مطلوب نباشد. به همین دلیل دو مقدارstart وend نیز ساخته شده‌اند که با تغییرdirection تراز متن را تغییر می دهند.

مقدار start

اگر جهت rtl باشد تراز از سمت راست و اگر ltr باشد از سمت چپ انجام می شود. 

مقدار end

اگر جهت rtl باشد تراز از سمت چپ و اگر ltr باشد از سمت راست انجام می شود.

 

دیدگاه کاربران

تاکنون <% totalComments %> دیدگاه برای این مطلب ثبت شده است.

تاکنون دیدگاهی ثبت نشده است. شما می توانید اولین شخصی باشید که دیدگاه خود را ارسال می کند

<% errorMessage %>

<% comment.name %>

avatar
<% comment.comment_replies.length %> پاسخ برای این دیدگاه ثبت شده است

<% reply.name %>

avatar

ارسال دیدگاه جدید

برای ارسال دیدگاه یا پرسش جدید از طریق فرم زیر اقدام کنید.

ارائه پاسخ به دیدگاه

شما در حال پاسخ دادن به دیدگاه «<% replyComment.name %>» هستید. انصراف از پاسخ

  • <% s %>
  • <% e %>

نکاتی درباره دیدگاه ها

  1. برای حذف کپچا (عبارت امنیتی) وارد اکانت خود شوید
  2. شما می توانید از markdown داخل کامنت خود استفاده کنید (اطلاعات بیشتر)
  3. دیدگاه ها قبل از نمایش نیازمند تائید می باشند