وسط چین(Center Align) کردن عناصر در CSS

برای اینکه یک عنصر بلوکی(مانند <div>) را وسط چین کنیم، می توانیم از ویژگی و مقدار margin: auto استفاده کنیم. اگر عرض(width) این عنصر را مشخص کنیم، از کشیده شدن آن به لبه های عنصر دربردارنده ی(ظرف) خود، جلوگیری می شود. با انجام این کار، برای عنصر ما یک عرض مشخص تنظیم می شود و بقیه ی فضا به طور برابر (به صورت افقی) بین دو مارجین(margin) تقسیم می شود.

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

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

وسط چین کردن متن(Center Align Text) در CSS

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

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

 در وسط قرار دادن یک عکس

برای وسط چین کردن یک تصویر، مارجین left و right را برای آن عکس برابر با auto قرار دهید و آن را به یک عنصر بلوکی(block element) تبدیل کنید:

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

راست چین یا چپ چین کردن با استفاده از ویژگی position

یک روش برای تراز کردن عناصر، این است که از ویژگی و مقدار position: absolute استفاده کنید:

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

 نکته: عناصری که ویژگی position آنها برابر با absolute قرار گرفته است، از چیدمان عناصر عادی(normal flow) حذف می شوند و می توانند روی عناصر همپوشانی کنند(بیفتند).

تراز به سمت راست یا چپ با استفاده از float

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

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

 هک clearfix

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

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

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

وسط چین کردن عمودی(Center Vertically) با استفاده از padding

در CSS راه های زیادی برای وسط چین کردن یک عنصر به صورت عمودی وجود دارد. یک راه حل ساده این است که از 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;
}

 وسط چین کردن عمودی با استفاده از 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%);
}

شما می توانید در مقاله ی transform های دو بعدی، نکات بیشتری در مورد transformها بیاموزید.

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

ما می توانیم با استفاده از flexbox اشیاء را وسط چین کنیم. اما لازم است بدانید که flexbox در مرورگر اینترنت اکسپلورر 10 و نسخه های قدیمی تر آن پشتیبانی نمی شود.

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

ختم کلام: در مقاله ی flexbox در CSS، در مورد flexbox ها نکات بیشتری خواهید آموخت.

• بعدی
• قبلی