نمایش خبر

image

آشنایی با خصوصیت text-align در CSS

در ادامه سلسله مقالات آموزش CSS در این مقاله در مورد خاصیت text-align در CSS صحبت خواهیم کرد.

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

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

p {
  text-align: center;  
}

در استفاده از خاصیت text-align به نکات زیر باید توجه کنید:

نکته 1 : این ویژگی علاوه بر تاثیر بر روی متن ها بر روی عناصر inline و inline-block نیز تاثیر می گذارد.برای درک بهتر این موضوع به مثال زیر توجه کنید.

<!DOCTYPE html>
<html lang="fa">
	<head>
		<meta charset="utf-8"/>
		<title>شرکت پیشگامان صفر و یک فرساد</title>
		<style>
			.wrapper{
				background:#2a9baa;	
				padding:20px;		
			} 
			p{
				color:#fff;			
				text-align:center;	
				font-size:18px;		
			}
		</style>	
	</head>		
	<body>		
		<div class="wrapper">
			<p>شرکت پیشگامان صفر و یک فرساد</p><br/><br/>
			<a href="http://pzof.ir">شرکت پیشگامان صفر و یک فرساد</a>
		</div>
	</body>	
</html>

همانطوز که در تصویر زیر خروجی قطعه کدهای بالا را مشاهده می کنید علاوه بر اینکه متن داخل تگ p وسط چین شده،تگ a که یک تگ inline می باشد در مرکز تگ p قرار گرفته است و این موضوع به دلیل مقدار center که به خاصیت text-align تگ p داده ایم می باشد.

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

a {
	Text-align:center;
}

نکته 3 : همانطور که در مقاله " مفهوم ارث بری در " بیان کردیم،خاصیت text-align جزو خواصی است که از والد به ارث برده می شود بنابراین مقدار ویژگی text-align ویژگی text-align بر روی فرزندان عنصر نیز تاثیر خواهد گذاشت و محتوای فرزندانی که از نوع بلاک هستند نیز تحت تاثیر مقدار text-align پدرانشان قرار خواهد گرفت.یعنی در مثال مربوط به نکته اول اگر کدهای CSS خود را به صورت زیر تغییر دهیم باز هم تغییری در نحوه نمایش عناصر ایجاد نخواهد شد چرا که تگ p خاصیت text-align را از والد خود به ارث خواهد برد.

.wrapper{
	background:#2a9baa;
	padding:20px;
	text-align:center;
	}
p{
	color:#fff;
	font-size:18px;
}

مقادیر text-align

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

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

تصویر زیر توصیف کننده چهار مقدار left,right,center,justify می باشد (سایر مقادیر در CSS3 معرفی شده اند و در حال حاضر به صورت آزمایشی استفاده می شوند ضمن اینکه تمام مرورگرها نیز به خوبی از انها پشتیبانی نمی کنند).

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

left

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

right

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

center

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

justify

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

start

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

end

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

inherit

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

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

match-parent

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

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

initial

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

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

.parent {
  text-align: center;
}

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

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

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

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

امیدوارم مطالعه این مقاله برای شما مفید بوده باشد.با ادامه آموزش های CSS با ما همراه باشید.

کامنی وجود ندارد.