درس نهم

در css برای اینکه بتوان عناصر را در جهت محور x ترازبندی کرد، روش های مختلفی وجود دارد.


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

به مثال زیر برای عناصر Block توجه کنید:

<h1>
<p>
<div>

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

برای تراز بندی عناصر می‌توان از خصوصیت position استفاده کرد.
به مثال زیر توجه کنید:

.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}


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

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

با استفاده از تنظیم خصوصیت margin با مقدار "auto" می توان عناصر Block را تراز بندی نمود.

.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}

در این مثال مقدار "auto" تعیین می‌کند که حاشیه های چپ و راست در فاصله یکسانی باشند. پس عنصر در وسط قرار می گیرد.
دقت کنید که خصوصیت width در صورتی که روی مقدار 100% تنظیم شده باشد، تراز بندی تاثیری نخواهد داشت.‌

هنگامی که برای تراز بندی این روش ها به کار برده شود، برای اینکه جلوی تفاوت ظاهر در مرورگرهای مختلف گرفته شود، بهتر است که برای عنصر <body> تنظیم خصوصیات padding و margin بر روی صفر انجام شود.
به مثال زیر توجه کنید:

body
{
margin:0;
padding:0;
}
.container
{
position:relative;
width:100%;
}
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}

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

برای ترازبندی عناصر می توان از روش دیگری نیز استفاده کرد و آن خصوصیت float می باشد.‌
به مثال زیر توجه کنید:

.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}

هنگامی که از خصوصیت float استفاده می شود، در بالای صفحه html یک DOCTYPE! ظاهر شده و عنصر <body> خصوصیات padding و margin باید با صفر مقدار دهی شود.
به مثال زیر توجه کنید :

body
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}

1000 کاراکتر باقیمانده است