021-20483015

تراز بندی در CSS

در CSS صفات مختلفی می توانند عناصر را بصورت افقی و عمودی ترازبندی کنند
 

عناصر وسط چین

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

مثال :

ترازبندی وسط چین
.center {
    margin: auto;
    width: 50%;
    border: 3px solid green;
    padding: 10px;
}
مشاهده مثال


نکته ! اگر صفت width برای عنصر تنظیم نشود یا مقدار آن بر روی 100% تنظیم شود ، ترازبندی وسط چین عمل نخواهد کرد.
 

متن وسط چین

اگر بخواهید فقط متن را داخل عنصر وسط چین کنید از ;text-align: center استفاده کنید.


مثال :

متن وسط چین
.center {
    text-align: center;
    border: 3px solid green;
}
مشاهده مثال

 

تصویر وسط چین

برای قرار دادن تصویر در وسط عرض مورد نظر ، از ;margin:auto استفاده کنید و تصویر را داخل عنصر سطح بلوک قرار دهید :

مثال :

تصویر وسط چین
img {
    display: block;
    margin: auto;
    width: 40%;
}
مشاهده مثال

 

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

یکی از روش های ترازبندی عناصر استفاده از ;position: absolute است.

مثال :

استفاده از position
.right {
    position: absolute;
    right: 0px;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}
مشاهده مثال


نکته ! عناصری که موقعیت قطعی  (absolute) می گیرند ، از جریان اصلی صفحه خارج شده و بر روی سایر عناصر قرار می گیرند.

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

همچنین زمانی که از position استفاده می کنیم ، مشکلی در اینترنت اکسپلورر 8 و قبل از آن وجود دارد. اگر یک عنصر نگهدارنده (در مورد مثال ما عنصر <div class="container">) عرض مشخص شده ای داشته باشد و بیانیه DOCTYPE! فراموش شود ، مرورگر اینترنت اکسپلورر 8 و ورژن های قبل از آن ، فضای حاشیه ای به اندازه 17px به سمت راست عنصر اضافه خواهد کرد. به نظر می رسد که این فضا برای نوار اسکرول تعبیه می شود. پس همیشه به هنگام استفاده از position بیانیه نوع سند را مشخص کنید.

مثال :
حل مشکل استفاده از position برای مرورگر های IE
body {
    margin: 0;
    padding: 0;
}

.container {
    position: relative;
    width: 100%;
}

.right {
    position: absolute;
    right: 0px;
    width: 300px;
    background-color: #b0e0e6;
}
مشاهده مثال

 

تراز راست چین و چپ چین - استفاده از float

روش دیگر برای ترازبندی عناصر ، استفاده از صفت float می باشد.

مثال :

تراز بندی با استفاده از float
.right {
    float: right;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}
مشاهده مثال


راهنمایی : در زمان ترازبندی عناصر با صفت float ، همیشه margin و padding را برای عنصر <body> تنظیم کنید. اینکار برای جلوگیری از تفاوت در ظاهر به هنگام نمایش در مرورگر های مختلف است.
همچنین زمانی که از position استفاده می کنیم ، مشکلی در اینترنت اکسپلورر 8 و قبل از آن وجود دارد. اگر یک عنصر نگهدارنده (در مورد مثال ما عنصر <div class="container">) عرض مشخص شده ای داشته باشد و بیانیه DOCTYPE! فراموش شود ، مرورگر اینترنت اکسپلورر 8 و ورژن های قبل از آن ، فضای حاشیه ای به اندازه 17px به سمت راست عنصر اضافه خواهد کرد. به نظر می رسد که این فضا برای نوار اسکرول تعبیه می شود. پس همیشه به هنگام استفاده از position بیانیه نوع سند را مشخص کنید.

مثال :
حل مشکل استفاده از float برای مرورگر های IE
body {
    margin: 0;
    padding: 0;
}

.right {
    float: right;
    width: 300px;
    background-color: #b0e0e6;
}
مشاهده مثال

 

وسط چین   عمودی - استفاده از padding

روش های زیادی برای تنظیم یک عنصر بصورت وسط چین عمودی وجود دارد که ساده ترین آنها استفاده از padding بالا و پایین است.

مثال :

وسط چین عمودی - استفاده از padding
.center {
    padding: 70px 0;
    border: 3px solid green;
}
مشاهده مثال

برای تنظیم وسط چین بودن متن ، از هر دو صفت padding و text-align: center استفاده کنید :

مثال :

وسط چین عمودی و افقی
.center {
    padding: 70px 0;
    border: 3px solid green;
    text-align: center;
}
مشاهده مثال

 

وسط چین عمودی - استفاده از line-height

راه دیگر وسط چین کردن متن از نظر عمودی ، استفاده از line-height با مقداری مشخص است که با صفت height برابری می کند :

مثال :

تراز وسط چین عمودی با استفاده از line-height
.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;
}
مشاهده مثال


اگر استفاده از padding و line-height جز گزینه های قابل اجرا نباشد ، راه سوم استفاده از position و صفت transform می باشد :

مثال :
وسط چین عمودی با استفاده از position و transform
.center { 
    height: 200px;
    position: relative;
    border: 3px solid green; 
}

.center p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
مشاهده مثال

 

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

یادگیری CSS

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط