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

عنصر در وسط

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

عنصر را در وسط قرار دهید

برای قرار دادن عنصر بلوکی (مثلاً <div>) در وسط افقی، از margin: auto;.

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

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

این عنصر div در وسط قرار دارد.

مثال

.center {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 20px;
}

آزمایش کنید

توجه:اگر تنظیم نشده باشد width ویژگی (یا آن را به 100%) تنظیم کنید، قرار دادن متن در وسط معتبر نخواهد بود.

تنظیم متن در وسط

اگر تنها می‌خواهید متن را در داخل عنصر قرار دهید، از text-align: center;:

این متن در وسط قرار دارد.

مثال

.center {
  text-align: center;
  border: 3px solid green;
}

آزمایش کنید

توضیح:برای مثال‌های بیشتری در مورد چگونه متن را قرار دهیم، لطفاً به متن CSS این فصل.

تصویر را در وسط قرار دهید

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

مثال

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

آزمایش کنید

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

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

این div راست‌چین است.

مثال

.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 20px;
}

آزمایش کنید

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

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

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

مثال

.right {
  float: right;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}

آزمایش کنید

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

clearfix Hack

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

مثال

.clearfix {
  overflow: auto;
}

آزمایش کنید

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

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

من عمودی در وسط هستم.

مثال

.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

یک تکنیک دیگر استفاده ازاین مقداربرابر با height مقدار ویژگی‌های line-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;
}

آزمایش کنید

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

اگر انتخاب شما 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%);
}

آزمایش کنید

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

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

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

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

مثال

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

آزمایش کنید

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