روش های ترازبندی یا Align در CSS

ترازبندی چیست؟

Align در لغت به معنی «تراز کردن» یا «ترازبندی» است. احتمالا با خودتان می گویید مگر چند تا از این خصوصیت ها داریم؟ در واقع زبان CSS پر است از خصوصیت هایی که مربوط به تعیین موقعیت و ترازبندی عناصر هستند و از آن جا که برخی از این روش ها برای برخی از موقعیت ها جواب نمیدهند، سعی کرده ام که چندین روش مختلف برای ترازبندی عمودی و افقی را به شما معرفی کنم.

هر کدام از این روش ها ممکن است در شرایط خاصی کار کند اما در شرایط دیگری جواب ندهد به همین دلیل آشنایی با آن ها می تواند کمک بسیار بزرگی به شما بکند.

استفاده از margin

اگر می خواهید عنصر خاصی را (مثلا یک عنصر <div>) در وسط صفحه قرار دهید باید از ;margin: auto استفاده کنید اما ممکن است عنصرتان به دو طرف صفحه کشیده شود. برای جلوگیری از این خطا باید عرض عنصرتان را دقیقا تعریف کنید.

در مثال زیر پس از تعیین عرض عنصر آن را در وسط صفحه قرار داده ایم:

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  margin: auto;
  width: 60%;
  border: 3px solid #73AD21;
  padding: 10px;
}
</style>
</head>
<body>

<h2>Center Align Elements</h2>
<p>To horizontally center a block element (like div), use margin: auto;</p>

<div dir='rtl' class="center">
  <p><b>هشدار: </b>استفاده از این دستور در مرورگر internet explorer 8 و نسخه های قبل تر تاثیری ندارد مگر اینکه DOCTYPE مربوط به HTML5 را تعریف کرده باشید.</p>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

نکته: اگر مقدار width تعیین نشده باشد یا آن را روی 100 درصد گذاشته باشید، دستور ;margin: auto هیچ تاثیری نخواهد داشت.

سوال: اگر عنصر ما از نوع inline بود چطور؟

پاسخ: بله روی عناصر inline نمی توان عرض مشخصی تعیین کرد. برای این کار می توانید عنصرتان را تبدیل به Block کنید و یا از inline-block استفاده کنید!

display: inline-block چیست؟

تفاوت عناصری که inline هستند با عناصری که inline-block هستند در یک مسئله ی مهم است؛ عناصر inline-block ترکیبی از مزایای دو حالت block و inline هستند بنابراین می توانند در عین حالی که inline هستند، عرض نیز بگیرند! همچنین می دانید که در عناصر inline به margin ها و padding های مربوط به top و bottom اهمیت داده نمی شود چرا که هیچ تاثیری ندارند اما در عناصر inline-block کاملا فعال هستند.

از طرفی دیگر نیازی نیست نگران اشغال کل صفحه توسط عناصر block باشید چرا که inline-block ها مانند block ها تمام عرض صفحه را نمی گیرند و به خط بعدی نیز نمی روند. به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<head>
<style>
span.a {
  display: inline; /* the default for span */
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;  
  background-color: yellow; 
}

span.b {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;    
  background-color: yellow; 
}

span.c {
  display: block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;    
  background-color: yellow; 
}
</style>
</head>
<body>

<h1>The display Property</h1>

<h2>display: inline</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. <span class="a">Aliquam</span> <span class="a">venenatis</span> gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet. </div>

<h2>display: inline-block</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. <span class="b">Aliquam</span> <span class="b">venenatis</span> gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet. </div>

<h2>display: block</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. <span class="c">Aliquam</span> <span class="c">venenatis</span> gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet. </div>

</body>
</html>

مشاهده ی خروجی در JSBin

در این مثال تفاوت رفتار سه دسته ی inline، block و inline-block را مشاهده می کنید.

ترازبندی متون

سوال: اگر بخواهیم یک متن را به وسط صفحه بیاوریم چطور؟

پاسخ: برای متن ها از خصوصیت دیگری به نام ;text-align: center استفاده می کنیم:

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  text-align: center;
  border: 3px solid green;
}
</style>
</head>
<body>

<h2>Center Text</h2>

<div class="center">
  <p>متنی که مشاهده می کنید در وسط صفحه قرار گرفته است</p>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

ترازبندی تصاویر

باید بدانید پروسه ی ترازبندی کمی برای عناصری مانند تصاویر متفاوت است. برای وسط قرار دادن تصاویر باید margin های راست و چپ را auto بگذارید و سپس خود تصویر را تبدیل به یک عنصر block کنید. به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<head>
<style>
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
</style>
</head>
<body>

<h2>Center an Image</h2>
<p>To center an image, set left and right margin to auto, and make it into a block element.</p>

<img src="https://www.w3schools.com/css/paris.jpg" alt="Paris" style="width:40%">

</body>
</html>

مشاهده ی خروجی در JSBin

اینها روش های مختلفی برای وسط قرار دادن عناصر بود اما برای موقعیت دهی عناصر مختلف راه های دیگری نیز وجود دارد!

ترازبندی به راست و چپ با position ها

یکی از راه های ترازبندی عناصر استفاده از ;position: absolute است. به این مثال دقت کنید:

<!DOCTYPE html>
<html>
<head>
<style>
.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}
</style>
</head>
<body>

<h2>Right Align</h2>
<p>An example of how to right align elements with the position property:</p>

<div class="right">
  <p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

نکته: ممکن است این روش ساده تر به نظر برسد اما اگر از قسمت های قبل یادتان باشد، عناصر Absolute از جریان کلی صفحه جدا می شوند و میتوانند روی دیگر عناصر قرار بگیرند. اگر از چنین حالتی خوشتان نمی آید از موقعیت Absolute استفاده نکنید.

ترازبندی با استفاده از خاصیت float

راه دیگر برای ترازبندی به سمت چپ و راست استفاده از خاصیت float است. مثال:

<!DOCTYPE html>
<html>
<head>
<style>
.right {
  float: right;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}
</style>
</head>
<body>

<h2>Right Align</h2>
<p>An example of how to right align elements with the float property:</p>

<div class="right">
  <p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

البته مشکل float نیز این است که برخی عناصر از نگه دارنده شان بیرون می زنند:

مشکل معروف clearfix - در این مثال عنصر پدر یا نگه دارنده کوچک تر از عنصر فرزند است بنابراین عنصر فرزند از نگه دارنده اش بیرون می زند

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

ترازبندی عمودی با padding

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

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  padding: 70px 0;
  border: 3px solid green;
}
</style>
</head>
<body>

<h2>Center Vertically</h2>
<p>In this example, we use the padding property to center the div element vertically:</p>

<div class="center">
  <p>I am vertically centered.</p>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

با تعیین padding بالا و پایین به اندازه ی یکسان 70 پیکسل می توانیم آن را در وسط عنصر نگه دارنده اش قرار دهیم! به همین سادگی!

حالا اگر بخواهیم آن را هم از جهت عمودی و هم از جهت افقی به سمت وسط تراز بندی کنیم باید قابلیت ;text-align: center را نیز اضافه کنیم:

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  padding: 70px 0;
  border: 3px solid green;
  text-align: center;
}
</style>
</head>
<body>

<h2>Centering</h2>
<p>In this example, we use padding and text-align to center the div element vertically and horizontally:</p>

<div class="center">
  <p>I am vertically and horizontally centered.</p>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

ترازبندی با line-height

یکی دیگر از روش های ترازبندی استفاده از line-height است. به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  line-height: 200px;
  height: 200px;
  border: 3px solid green;
  text-align: center;
}

.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}
</style>
</head>
<body>

<h2>Centering</h2>
<p>In this example, we use the line-height property with a value that is equal to the height property to center the div element:</p>

<div class="center">
  <p>I am vertically and horizontally centered.</p>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

شما می توانید با این کد ها بازی کنید تا متوجه تغییر آن ها بشوید.

استفاده از قابلیت transform

یکی دیگر از راه های ترازبندی استفاده از قابلیت transform است:

<!DOCTYPE html>
<html>
<head>
<style>
.center { 
  height: 200px;
  position: relative;
  border: 3px solid green; 
}

.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
</style>
</head>
<body>

<h2>Centering</h2>
<p>In this example, we use positioning and the transform property to vertically and horizontally center the div element:</p>

<div class="center">
  <p>I am vertically and horizontally centered.</p>
</div>

<p dir='rtl'>هشدار: این قابلیت در مرورگر internet explorer 8 و نسخه های قبل تر آن کار نمی کند.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

transform خصوصیتی است که می تواند عناصر را از نظر ظاهری تغییر دهد. این تغییر ظاهری می تواند چرخاندن عنصر، بزرگ یا کوچک تر کردن عنصر، حرکت دادن عنصر و ... باشد. حالت های مختلف کار با آن بسیار زیاد است بنابراین در این مقاله نمیگنجد اما یک مثال ساده از آن را برایتان آورده ام:

<!DOCTYPE html>
<html>
<head>
<style> 
#div1
{
width:120px;
height:100px;
background-color:yellow;
border:1px solid black;
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari 3-8 */
}
</style>

<script>
function rotate(value)
{
document.getElementById('div1').style.webkitTransform="rotate(" + value + "deg)";
document.getElementById('div1').style.msTransform="rotate(" + value + "deg)";
document.getElementById('div1').style.MozTransform="rotate(" + value + "deg)";
document.getElementById('div1').style.OTransform="rotate(" + value + "deg)";
document.getElementById('div1').style.transform="rotate(" + value + "deg)";
document.getElementById('span1').innerHTML=value + "deg";
}
</script>

</head>
<body>

<h1>The transform Property</h1>

<p>Rotate the yellow div element:</p>

<div id="div1">HELLO</div>

Rotate: <br>
<input type="range" min="-360" max="360" value="7" onchange="rotate(this.value)" /><br>
transform: rotate(<span id="span1">7deg</span>);

</body>
</html>

مشاهده ی خروجی در JSBin

با حرکت دادن slider می توانید مربع را rotate کنید، یعنی بچرخانید. در مورد این خاصیت در فصل های بعدی صحبت خواهیم کرد. به هر حال امیدوارم از این قسمت لذت برده باشید.