سبد (0)

ترازبندی عناصر در CSS

ترازبندی عناصر در CSS

Wiki

در CSS برای تراز بندی عناصر در جهت محور X روش های زیادی وجود دارد.

تراز بندی عناصر Block

Wiki

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

مثال برای عناصر Block:

  • <h1>
  • <p>
  • <div>

برای استایل دهی متن، فصل Styling Text را مشاهده فرمایید.

در این فصل نشان خواهیم داد که چگونه یک عنصر Block را در جهت محور X تراز بندی کنید.

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

Wiki

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

توجه: استفاده از مقدار "auto" برای خصوصیت margin در IE8 و نسخه های پایین تر کار نخواهد کرد مگر اینکه یک !DOCTYPE در بالای صفحه HTML اعلان شود.

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

مثال (ترازبندی عناصر در CSS)

.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}
خودتان امتحان کنید »

نکته: اگر خصوصیت width با مقدار 100% تنظیم شود، تراز بندی اثری نخواهد داشت.

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

Wiki

یک روش دیگر برای ترازبندی عناصر استفاده از خصوصیت position است:

مثال (ترازبندی عناصر در CSS)

.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
خودتان امتحان کنید »

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

سازگاری (Compatibility view)

Wiki

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

زمانی که از خصوصیت position برای تراز بندی استفاده می کنید، در مرورگر IE8 و نسخه های قبلتر یک مشکل بوجود می آید. در واقع اگر یک عنصر ظرف (container element) با عرض مشخص شده داشته باشیم (در این مورد  < "div class="container>) و یک DOCTYPE! در بالای صفحه HTML اعلان نشده باشد با مشکل زیر، روبرو خواهیم شد:

IE8 و نسخه های قبلتر به اندازه 17px به عنوان حاشیه راست (margin) اضافه می کند. به نظر می رسد که این فضا برای scrollbar رزرو شده است. بنابراین زمانی که از خصوصیت position استفاده می کنید همیشه یک DOCTYPE! در بالای صفحه HTML اعلان کنید.

مثال (ترازبندی عناصر در CSS)

body
{
margin:0;
padding:0;
}
.container
{
position:relative;
width:100%;
}
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
خودتان امتحان کنید »

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

Wiki

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

مثال (ترازبندی عناصر در CSS)

.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
خودتان امتحان کنید »

زمانی که از خصوصیت float استفاده می کنید، همیشه یک DOCTYPE! در بالای صفحه HTML اعلان و همچنین برای عنصر <body> خصوصیات padding و margin را با مقدار "0" تنظیم کنید:

مثال (ترازبندی عناصر در CSS)

body
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
خودتان امتحان کنید »
نوشته شده توسط امیر پهلوان صادق
بازدید: 29250

آموزش صوتی CSS

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

در میان شش هزار مطلب آموزشی منتشر شده در بیاموز، جستجو نمایید ...

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین - بانک ملت معرفی بیاموز در شبکه سه