طرح‌بندی CSS - ترازبندی افقی و عمودی

عناصر وسط میں

افقی اور عمودی وسط میں لایا جائے عناصر

عناصر کو وسط میں لایا جائے

بلاک عنصر (مثلاً <div>) کو افقی وسط میں لایا جانا چاہئے تو، margin: auto;.

عناصر کی قطرا کو سیٹ کرنا اس کو بندرگاہ کی حاشیے تک پھیلنے سے روکدیا جائے گا

تو، عناصر کا مقرر کردہ قطرا استعمال کیا جائے گا، بقیہ فضائی کو دو بیرونی مارگنز کے درمیان مساوی طور پر تقسیم کیا جائے گا:

یہ div عنصر وسط میں ہے

مثال

.center {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  پدینگ: 20px;
}

آموزش شخصی

توجه:اگر نہیں سیٹ کیا گیا ہے width پارٹی (یا اس کو 100% میں رکھا جائے)، وسط میں لایا جانا ناکام رہے گا

تکمیل کا مطلب کیسے تکنیک، دیکھئے

اگر صرف عناصر کے اندر متن کو وسط میں لایا جانا چاہئے تو، تراز-نوی: مرکزی;:

یہ پاراگراف وسط میں ہے

مثال

.center {
  تراز-نوی: مرکزی;
  border: 3px solid green;
}

آموزش شخصی

توضیح:تکمیل کا مطلب کیسے تکنیک، دیکھئے نوشتار CSS اس فصل میں

تصویر کو وسط میں لایا جائے

کسی چاہئے کہ تصویر کو وسط میں لایا جائے تو، سمت چپ اور سمت دکھن کی بیرونی مارگنز کو سینٹر کیا جائے auto، و آن را به عنوان عنصر بلوک تنظیم کنید:

مثال

img {
  دسپلوی: بلوک;
  مجرد-چپ: اتوماتیک;
  مجرد-راست: اتوماتیک;
  شیرت: 40%;
}

آموزش شخصی

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

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

این دیوی راست‌چین است.

مثال

.right {
  پوزیشن: اچیوسیو;
  راست: 0px;
  شیرت: 300px;
  کنده: 3px solid #73AD21;
  پدینگ: 20px;
}

آموزش شخصی

توجه:عناصر قرارگرفته به صورت مطلق از جریان عادی حذف خواهند شد و ممکن است با عناصر دیگر برخورد کنند.

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

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

مثال

.right {
  شناور: راست;
  شیرت: 300px;
  کنده: 3px solid #73AD21;
  پدینگ: 10px;
}

آموزش شخصی

توجه:اگر عنصری بلندتر از عنصر شامل آن باشد و شناور باشد، آن را از بند عادی حذف خواهد کرد و ممکن است با عناصر دیگر برخورد کند. می‌توانید از چالش‌زدایی-چیف-هک برای حل این مشکل استفاده کنیم (لطفاً مثال زیر را ببینید).

چالش‌زدایی-چیف-هک

سپس می‌توانیم به عنصر شامل افلاتو: اتوماتیک;، برای حل این مشکل استفاده کنید:

مثال

.clearfix {
  افلاتو: اتوماتیک;
}

آموزش شخصی

تراز عمودی - استفاده از پدینگ

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

من در مرکز عمودی هستم.

مثال

.center {
  پدینگ: 70px 0;
  border: 3px solid green;
}

آموزش شخصی

برای تراز عمودی و افقی همزمان، از پدینگ اور تراز-نوی: مرکزی;:

من در وسط افقی و عمودی قرار دارم.

مثال

.center {
  پدینگ: 70px 0;
  border: 3px solid green;
  تراز-نوی: مرکزی;
}

آموزش شخصی

تراز عمودی - استفاده از لاین-های

یک نکته دیگر این است که ازمقدار آنبرابر است با ارتفاع کیفیت-مقادیر لاین-های کیفیت:

من در وسط افقی و عمودی قرار دارم.

مثال

.center {
  لاین-های: 200px;
  height: 200px;
  border: 3px solid green;
  تراز-نوی: مرکزی;
}
/* اگر متن چند خطی باشد، کد زیر را اضافه کنید: */
.center p {
  لاین-های: 1.5;
  دسپلوی: اینلاین-بلاک;
  ورتیکال-ایلین: میانه;
}

آموزش شخصی

تراز عمودی - استفاده از پوزیشن و ترنسمیفر

اگر انتخاب شما پدینگ اور لاین-های، تو می‌توانید راه حل دیگری استفاده کنید پوزیشن اور ترنسمیفر کیفیت:

من در وسط افقی و عمودی قرار دارم.

مثال

.center { 
  height: 200px;
  پوزیشن: ریلیئیوی;
  border: 3px solid green; 
}
.center p {
  مجرد: 0;
  پوزیشن: اچیوسیو;
  بالا: 50%;
  چپ: 50%;
  ترنسمیفر: ترنسلیت(-50%, -50%);
}

آموزش شخصی

توضیح:شما در تبدیل 2D در این فصل بیشتر درباره ویژگی transform یاد خواهید گرفت.

تراز عمودی - استفاده از Flexbox

شما همچنین می‌توانید از flexbox برای مرکز کردن محتوا استفاده کنید. توجه داشته باشید که IE10 و نسخه‌های قبلی آن از flexbox پشتیبانی نمی‌کنند:

من در وسط افقی و عمودی قرار دارم.

مثال

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid green; 
}

آموزش شخصی

توضیح:شما در CSS Flexbox شما در این فصل بیشتر درباره Flexbox یاد خواهید گرفت.