ترازبندی های افقی و عمودی در CSS

یکی از امکان های مهمی که در CSS وجود دارد همین ترازبندی های افقی و عمودی است. ترازبندی یک عنصر و یا حتی یک متن تاثیر زیادی در نحوه ی نمایش مطلوب یک صفحه وب دارد. در این فصل با انواع ترازبندی ، ترازبندی عناصر مختلف، ترازبندی متون، ترازبندی تصاویر و ... آشنا میشویم.


ترازبندی وسط برای عناصر

برای وسط چین کردن یک عنصر از نوع block (مانند عنصر <div>) از ;margin: auto استفاده کنید. برای استفاده از این روش باید صفت width برای عنصر مورد نظر مقدار دهی شود. در غیر این صورت ;margin: auto تاثیری در ترازبندی نخواهد داشت.

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

بعد از اینکه عنصر پهنای مشخصی را اشغال کرد، بقیه فضا به صورت مساوی بین دو margin سمت راست و چپ تقسیم میشود.

 این عنصر div با استفاده از ;margin: auto وسط چین شده است.

 

.center {
    margin: auto;
    width: 50%;
    border: 3px solid green;
    padding: 10px;
}
خودتان امتحان کنید

نکته : ترازبندی وسط برای حالتی که صفت width تنظیم نشده باشد اعمال نخواهد شد.


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

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

این متن وسط چین شده است.

 

.center {
    text-align: center;
    border: 3px solid green;
}
خودتان امتحان کنید

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

برای وسط چین کردن یک تصویر ابتدا با استفاده از صفت display، تصویر را به یک عنصر block تبدیل کرده و سپس از ;margin: auto استفاده میکنیم :

 

paris

 

img {
    display: block;
    margin: auto;
    width: 40%;
}
خودتان امتحان کنید

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

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

.right {
    position: absolute;
    right: 0px;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}
خودتان امتحان کنید

یاد داشته باشید عناصری که صفت position آنها با مقدار absolute تنظیم میشوند از جریان قرارگیری عادی در صفحه خارج میشوند و میتوانند باعث همپوشانی عناصر دیگر شوند.

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

 

همچنین مشکلی هم در نسخه های IE8 و نسخه های قدیمی تر آن وقتی از صفت position استفاده میشود، وجود دارد و آن این است که اگرعنصری مانند <"div class="container> دارای صفت width با مقدار مشخصی باشد و اعلان DOCTYPE! جا افتاده باشد ، مرورگر اینترنت اکسپلورر 17 پیکسل margin به سمت راست اضافه میکند. بنابراین همیشه از اعلان DOCTYPE! در ابتدای صفحات خود استفاده کنید : 

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;
    border: 3px solid #73AD21;
    padding: 10px;
}
خودتان امتحان کنید

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

 

همچنین مشکلی هم در نسخه های IE8 و نسخه های قدیمی تر آن وقتی از صفت float استفاده میشود، وجود دارد و آن این است که اگرعنصری مانند <"div class="container> دارای صفت width با مقدار مشخصی باشد و اعلان DOCTYPE! جا افتاده باشد، مرورگر اینترنت اکسپلورر 17 پیکسل margin به سمت راست اضافه میکند. بنابراین همیشه از اعلان !DOCTYPE در ابتدای  صفحات خود استفاده کنید :

body {
    margin: 0;
    padding: 0;
}

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

وسط چین کردن به صورت عمودی با استفاده از padding

چندین روش برای وسط چین کردن یک عنصر به صورت عمودی در css وجود دارد. یک روش ساده برای این کار استفاده از صفت 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 برابر است :

من هم به صورت افقی و هم به صورت عمودی وسط چین شده ام.

 

center {
    line-height: 200px;
    height: 200px;
    border: 3px 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 است :

من هم به صورت افقی و هم به صورت عمودی وسط چین شده ام.

 

.center { 
    height: 200px;
    position: relative;
    border: 3px solid green; 
}

.center p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
خودتان امتحان کنید

 

منتشر شده در ۲۵ شهریور ۱۳۹۶ حمید رضا ملکی ۸۶۳ بازدید
دیدگاه ها

هنوز دیدگاهی ثبت نشده