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

Main Page Tutorial
موارد آموزشی
۱	خانه
۲	مقدمه
۳	شیوهٔ نوشتار
۴	انتخابگرها
۵	اضافه‌کردن CSS
۶	نظرات
۷	رنگ‌ها RGB HEX HSL
۸	پس‌زمینه‌ها رنگ پس‌زمینه‌ها تصویر پس‌زمینه تکرار پس‌زمینه پیوست در پس‌زمینه کوته‌شدهٔ پس‌زمینه
۹	کادرها عرض کادر رنگ کادر اطراف کادر کوته‌شدهٔ کادر کادر گرد شده
۱۰	حاشیه‌ها شکسته‌شدن حاشیه
۱۱	Padding
۱۲	ارتفاع/عرض
۱۳	Box Model
۱۴	Outline عرض Outline رنگ Outline کوته‌شدهٔ Outline Outline Offset
۱۵	متن رنگ متن آراستگی متن تبدیل‌کردن متن فاصله‌گذاری متن سایهٔ متن
۱۶	قلم‌ها خانواده قلم استایل قلم اندازهٔ قلم کوته‌شدهٔ قلم
۱۷	آیکن‌ها
۱۸	لینک‌ها
۱۹	لیست‌ها
۲۰	جداول
۲۱	ویژگی Display
۲۲	ویژگی Max-Width
۲۳	ویژگی Position
۲۴	ویژگی Overflow
۲۵	ویژگی Float ویژگی Clear مثال‌های 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 کسب خواهید کرد.

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

صفحهٔ بعد»

«صفحهٔ قبل