ورود به کارتابل مشتریان وب مهراز
تراز بندی در CSS
یادگیری 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 است.
مثال :
.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 بیانیه نوع سند را مشخص کنید.
مثال :
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> تنظیم کنید. اینکار برای جلوگیری از تفاوت در ظاهر به هنگام نمایش در مرورگر های مختلف است.
همچنین زمانی که از position استفاده می کنیم ، مشکلی در اینترنت اکسپلورر 8 و قبل از آن وجود دارد. اگر یک عنصر نگهدارنده (در مورد مثال ما عنصر <div class="container">) عرض مشخص شده ای داشته باشد و بیانیه DOCTYPE! فراموش شود ، مرورگر اینترنت اکسپلورر 8 و ورژن های قبل از آن ، فضای حاشیه ای به اندازه 17px به سمت راست عنصر اضافه خواهد کرد. به نظر می رسد که این فضا برای نوار اسکرول تعبیه می شود. پس همیشه به هنگام استفاده از position بیانیه نوع سند را مشخص کنید.
مثال :
body {
margin: 0;
padding: 0;
}
.right {
float: right;
width: 300px;
background-color: #b0e0e6;
}وسط چین عمودی - استفاده از 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;
}
/* اگر متن دارای سطر های متعدد است ، کد زیر را هم اضافه کنید */
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}اگر استفاده از padding و line-height جز گزینه های قابل اجرا نباشد ، راه سوم استفاده از 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%);
}
نظر شما
>