ترازبندی وسط برای عناصر
برای وسط چین کردن یک عنصر از نوع block (مانند عنصر <div>) از ;margin: auto استفاده کنید. برای استفاده از این روش باید صفت width برای عنصر مورد نظر مقدار دهی شود. در غیر این صورت ;margin: auto تاثیری در ترازبندی نخواهد داشت.
تنظیم کردن صفت width برای یک عنصر از گسترده شدن آن عنصر در تمام فضایی که در اختیار آن قرار داده شده است، جلوگیری میکند.
بعد از اینکه عنصر پهنای مشخصی را اشغال کرد، بقیه فضا به صورت مساوی بین دو margin سمت راست و چپ تقسیم میشود.
این عنصر div با استفاده از ;margin: auto وسط چین شده است.
}center .
; margin : auto
; %width : 50
; border : 3 px solid green
; padding : 10 px
{
نکته : ترازبندی وسط برای حالتی که صفت width تنظیم نشده باشد اعمال نخواهد شد.
ترازبندی وسط برای متون
برای وسط چین کردن یک متن داخل یک عنصر از ;text-align: center استفاده کنید.
} center.
; text-align : center
; border : 3 px solid green
{
ترازبندی وسط برای تصاویر
برای وسط چین کردن یک تصویر ابتدا با استفاده از صفت display، تصویر را به یک عنصر block تبدیل کرده و سپس از ;margin: auto استفاده میکنیم :
} img
; display : block
; margin : auto
; %width : 40
{
ترازبندی راست و چپ با استفاده از صفت position
یکی از روش های ترازبندی عناصر استفاده از ;position: absolute است. در نمونه مثال زیر نحوه ی استفاده از صفت position برای ترازبندی مشخص شده است :
} right.
; position : absolute
; right : 0 px
; width : 300 px
; border : 3 px solid #73AD21
; padding : 10 px
{
یاد داشته باشید عناصری که صفت position آنها با مقدار absolute تنظیم میشوند از جریان قرارگیری عادی در صفحه خارج میشوند و میتوانند باعث همپوشانی عناصر دیگر شوند.
نکته : وقتی از صفت position برای ترازبندی استفاده میکنید ، همیشه مقدار margin و padding را برای عنصر <body> تنظیم کنید. این باعث جلوگیری از تفاوتی میشود که ممکن است در ظاهر صفحه در مرورگر های مختلف به وجود آید.
همچنین مشکلی هم در نسخه های IE۸ و نسخه های قدیمی تر آن وقتی از صفت position استفاده میشود، وجود دارد و آن این است که اگرعنصری مانند <"div class="container> دارای صفت width با مقدار مشخصی باشد و اعلان DOCTYPE! جا افتاده باشد ، مرورگر اینترنت اکسپلورر ۱۷ پیکسل margin به سمت راست اضافه میکند. بنابراین همیشه از اعلان DOCTYPE! در ابتدای صفحات خود استفاده کنید :
} body
; margin : 0
; padding : 0
{
} container.
; position : relative
; %width : 100
{
} right.
; position : absolute
; right : 0 px
; width : 300 px
; background-color : #b0e0e6
{
ترازبندی راست و چپ با استفاده از صفت float
روشی دیگر برای ترازبندی عناصر استفاده از صفت float است :
} right.
; float : right
; width : 300 px
; border : 3 px solid #73AD21
; padding : 10 px
{
نکته : وقتی از صفت float برای ترازبندی استفاده میکنید ، همیشه مقدار margin و padding را برای عنصر <body> تنظیم کنید. این باعث جلوگیری از تفاوتی میشود که ممکن است در ظاهر صفحه درمرورگر های مختلف به وجود آید.
همچنین مشکلی هم در نسخه های IE۸ و نسخه های قدیمی تر آن وقتی از صفت float استفاده میشود، وجود دارد و آن این است که اگرعنصری مانند <"div class="container> دارای صفت width با مقدار مشخصی باشد و اعلان DOCTYPE! جا افتاده باشد، مرورگر اینترنت اکسپلورر ۱۷ پیکسل margin به سمت راست اضافه میکند. بنابراین همیشه از اعلان !DOCTYPE در ابتدای صفحات خود استفاده کنید :
} body
; margin : 0
; padding : 0
{
} right.
; float : right
; width : 300 px
; background-color : #b0e0e6
{
وسط چین کردن به صورت عمودی با استفاده از padding
چندین روش برای وسط چین کردن یک عنصر به صورت عمودی در css وجود دارد. یک روش ساده برای این کار استفاده از صفت padding است :
من با استفاده از صفت padding به صورت عمودی وسط چین شده ام .
} center.
; padding : 70 px 0
; border : 3 px solid green
{
برای وسط چین کردن عمودی و افقی از صفت padding و text-align: center استفاده کنید :
من به صورت عمودی و افقی وسط چین شده ام.
} center.
; padding : 70 px 0
; border : 3 px solid green
; text-align : center
{
وسط چین کردن به صورت عمودی با استفاده از line-height
روشی دیگر برای وسط چین کردن به صورت عمودی تنظیم کردن صفت line-height با مقداری که با مقدار صفت height برابر است :
من هم به صورت افقی و هم به صورت عمودی وسط چین شده ام.
} center
; line-height : 200 px
; height : 200 px
; border : 3 px solid green
; text-align : center
{
*/ If the text has multiple lines, add the following: /*
} center p.
; line-height : 1.5
; display : inline-block
; vertical-align : middle
{
وسط چین کردن به صورت عمودی با استفاده از position و transform
روشی دیگر برای وسط چین کردن عناصر استفاده از صفات position و transform است :
من هم به صورت افقی و هم به صورت عمودی وسط چین شده ام.