چطور در CSS المان ها را وسط چین کنیم؟

1,961 بازدید 2 سال قبل 0 دیدگاه

شاید تا چند وقت پیش، یکی از سخت ترین کارها توی CSS وسط چین کردن المان ها داخل یک div بود. اما حالا به لطف فلکس باکس و گرید در CSS تبدیل شده به یکی از راحت ترین کارها.

خب بریم سراغ مثال. فرض میکنیم کد HTML ما به این صورت باشه

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="UTF8" />
    <title>Laraplus - How to center a div</title>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div class="parent">
      <div class="child child1">Child 1</div>
      <div class="child child2">Child 2</div>
    </div>
  </body>
</html>

این هم محتویات فایل style.css:

.parent {
  width: 800px;
  height: 400px;
  border: 1px solid black;
}
.child {
  width: 200px;
  height: 100px;
}
.child1 {
  background-color: #457123;
}
.child2 {
  background-color: #562378;
}

خب تا اینجای کار، شکل اولیه ما میشه این:

ما میخوایم کاری کنیم که child1 و child2 هم از نظر افقی و هم از نظر عمودی، در وسط parent (وسط محوطه دارای کادر) قرار بگیرن.

کافیه این کد رو توی فایل style.css قرار بدیم:

.parent {
  display: flex;
  justify-content: center;
}

می بینی که با همین دو خط کد، آیتم های ما از نظر افقی وسط چین شدند. حالا اگه بخوایم از نظر عمودی هم وسط چین بشن، کافیه پراپرتی align-items رو هم بهش اضافه کنیم:

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

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

به عنوان جایزه این نکته رو هم بگم که اگه بخوای child 1 و child 2 در عین وسط چین بودن به اندازه یکسان از همه طرف فاصله داشته باشن کافیه یه تغییر کوچک در پراپرتی justify-content اعمال کنی:

justify-content: space-evenly;

خب توی این پست با نحوه وسط چین کردن هر چیزی با css توسط فلکس باکس آشنا شدی.

اگه میخوای مدرن ترین متدهای طراحی سایت با استفاده از HTML و CSS رو یادبگیری، حتما به دوره آموزش طراحی سایت ریسپانسیو لاراپلاس یه نگاهی بنداز. (اینجا)

در پست بعدی همین کار رو با استفاده از Grid انجام میدیم

0 دیدگاه (ارسال دیدگاه)