Layout - تراز افقی و عمودی

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
۱خانه
۲مقدمه
۳شیوهٔ نوشتار
۴انتخابگرها
۵اضافه‌کردن CSS
۶نظرات
۷رنگ‌ها
۸پس‌زمینه‌ها
۹کادرها
۱۰حاشیه‌ها
۱۱Padding
۱۲ارتفاع/عرض
۱۳Box Model
۱۴Outline
۱۵متن
۱۶قلم‌ها
۱۷آیکن‌ها
۱۸لینک‌ها
۱۹لیست‌ها
۲۰جداول
۲۱ویژگی Display
۲۲ویژگی Max-Width
۲۳ویژگی Position
۲۴ویژگی Overflow
۲۵ویژگی Float
۲۶مقدار Inline-block
۲۷ترازکردن
۲۸ترکیب کننده‌ها
۲۹شبه کلاس
۳۰شبه عنصر
۳۱ویژگی Opacity
۳۲نوار Navigation
۳۳منو آبشاری
۳۴گالری تصویر
۳۵Image Sprites
۳۶انتخاب‌گرهای خاصیت
۳۷فرم‌ها
۳۸شمارنده‌ها
۳۹چیدمان وب‌سایت
۴۰واحدها
۴۱اولویت‌بندی
CSS پیشرفته
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

عناصر وسط چین

برای وسط چین کردن یک عنصر (مانند <div>)، از margin: auto; استفاده کنید.[۱]

تنظیم عرض عنصر موجب جلوگیری از کشیده شدن آن تا لبه‌های عنصر نگه‌دارنده می‌شود.

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

این عصر div وسط چین شده‌است.

مثال
1 .center {
2   margin: auto;
3   width: 50%;
4   border: 3px solid green;
5   padding: 10px;
6 }


نکته: اگر ویژگی width تنظیم نشده باشد (یا روی ۱۰۰٪ تنظیم شده باشد) وسط چین کردن آن تأثیری ندارد.

متن وسط چین

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

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

مثال
1 .center {
2   text-align: center;
3   border: 3px solid green;
4 }


نکته: برای مشاهده مثال‌های بیشتر در مورد نحوه تراز بندی متن، فصل متن در CSS را ببینید.

قرار دادن یک تصویر در وسط

برای قراردادن یک تصویر در وسط، حاشیه چپ و راست را روی auto تنظیم کنید و آن را درون یک عنصر block قرار دهید:

مثال
1 img {
2   display: block;
3   margin-left: auto;
4   margin-right: auto;
5   width: 40%;
6 }


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

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

در سال‌های جوانی و سال‌هایی که آسیب‌پذیر تر بودم، پدرم توصیه‌هایی را به من کرد که از آن زمان به بعد ذهنیتم را عوض کرده‌ام.

مثال
1 .right {
2   position: absolute;
3   right: 0px;
4   width: 300px;
5   border: 3px solid #73AD21;
6   padding: 10px;
7 }


نکته: عنصرهایی که به صورت absolute موقعیت دهی شده‌اند از جریان عادی پاک می‌شوند، و می‌توانند با عناصر همپوشانی داشته باشند.

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

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

مثال
1 .right {
2   float: right;
3   width: 300px;
4   border: 3px solid #73AD21;
5   padding: 10px;
6 }


نکته: اگر یک عنصر از عنصری که درون آن قرار دارد بزرگ‌تر باشد، و float شده باشد، از عنصر نگهدارنده خود سرریز خواهد شد. می‌توانید از هک "clearfix" برای حل این مشکل استفاده کنید. (مثال زیر را ببینید)

استفاده از clearfix Hack

بنابراین می‌توانیم overflow: auto; را به عنصر نگهدارنده اضافه کنیم تا این مشکل را رفع کنیم:

مثال
.clearfix {
  overflow: auto;
}


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

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

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

مثال
.center {
  padding: 70px 0;
  border: 3px solid green;
}


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

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

مثال
1 .center {
2   padding: 70px 0;
3   border: 3px solid green;
4   text-align: center;
5 }


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

راه حل بعدی استفاده از ویژگی line-height با مقداری برابر با مقدار ویژگی height است.

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

مثال
 1 .center {
 2   line-height: 200px;
 3   height: 200px;
 4   border: 3px solid green;
 5   text-align: center;
 6 }
 7 
 8 /* If the text has multiple lines, add the following: */
 9 .center p {
10   line-height: 1.5;
11   display: inline-block;
12   vertical-align: middle;
13 }


وسط چین عمودی - با استفاده از position و transform

اگر padding و line-height جزء گزینه‌ها نباشند، راه حل دیگر استفاده از موقعیت دهی (به انگلیسی: positioning)، و ویژگی transform است:

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

مثال
 1 .center {
 2   height: 200px;
 3   position: relative;
 4   border: 3px solid green;
 5 }
 6 
 7 .center p {
 8   margin: 0;
 9   position: absolute;
10   top: 50%;
11   left: 50%;
12   transform: translate(-50%, -50%);
13 }


نکته: می توانید مطالب بیشتری را در مورد ویژگی transform در فصل 2D Transforms بیاموزید.

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

همچنین می‌توانید از Flexbox برای وسط چین کردن عمودی این موارد استفاده کنید. فقط توجه داشته باشید که flexbox در IE10، و نسخه‌های قدیمی‌تر پشتیبانی نمی‌شود:

من از نظر عمودی و افقی در وسط هستم.

مثال
1 .center {
2   display: flex;
3   justify-content: center;
4   align-items: center;
5   height: 200px;
6   border: 3px solid green;
7 }


نکته: در بخش CSS Flexbox ما اطلاعات بیشتری در مورد Flexbox کسب خواهید کرد.

خودتان را با تمرینها آزمایش کنید!


منابع آموزشی