کعبه ی آمال مرکز سازی با CSS

کیریس کُویِر اخیراً در سایت خود، حقه‌های css، یک درخت تصمیم گیری منتشر کرده که راه‌های مختلفی برای در مرکز قرار دادن اشیا به صورت افقی و عمودی به وسیله ی CSS را نشان می دهد. تمام راه حل‌های مستقل نقاط ضعفی دارند، اما ترکیب أن ها یک ابزار مرکزسازی خواهد بود که در تمام مرورگرهای IE8 و مرورگرهای بعد آن کار میکند.

این روش انجام این کار است.

بلوک های آغازین

اگر شما می‌خواهید یک وب سایت پاسخ‌گو به ابعاد (responsive ) بسازید، به طور معمول ابعاد عناصر صفحه را به درصد مشخص میکنید، اجازه بدین عنصر .container را بسازیم:

<div class="container">
  ...
</div>

.container {
  width: 70%;
  height: 70%;
  margin: 40px auto;
  background: red;
}

برای اینکه از درست کشیده شدن عناصر مطمئن شویم، html, body { width: 100%; height: 100%; } را تنظیم میکنیم.

تبدیل به جدول

حالا، درون .container، ما مرکزسازی عمودی را به روش معمول جدول ایجاد میکنیم. این روش بلوک عناصر را میگیرد و آن‌ها را وادار میکند تا شبیه سلول های جدول عمل کنند و به ما مرکزسازی عمودی را بدهند:

<div class="container">
  <div class="outer">
    <div class="inner">
      ...
    </div>
  </div>
</div>

.outer {
  display: table;
  width: 100%;
  height: 100%;
}
.inner {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

در آخر، ما مرکزسازی افقی را به عنصرمان اضافه میکنیم:

<div class="container">
  <div class="outer">
    <div class="inner">
      <div class="centered">
        ...
      </div>
    </div>
  </div>
</div>

.centered {
  position: relative;
  display: inline-block;

  width: 50%;
  padding: 1em;
  background: orange;
  color: white;
}

در اینجا، میتوانید هرچیزی که مایل هستید را قرار دهید، شامل یک بلوک متنی با ارتفاع متغییر، یا یک عنصر با محل دقیق.

تغییرات

برای تغییر دادن مرکز افقی عنصر کافی است ویژگی text-align را در .inner تغییر بدین. برای تغییر دادن مرکز عمودی هم باید ویژگی vertical-align را در .inner تغییر دهید.

نتیجه‌گیری

ممکن است در این مثال تعداد نشانه گذاری ها زیاد بنظر برسد، ولی بخش‌هایی که کار اصلی را انجام میدهند، سه div با: کلاس .outer، کلاس .inner، و کلاس .centered است و کد CSS برای آن‌ها ثابت است بنابراین میتوانید آن را داخل قالب اولیه CSS تمام پروژه هاتون قرار داده و دیگر نگرانش نباشین.

در واقع این روش يك عنصر بيشتر از اكثر روش ها داشته و کاملا خلل ناپذیر است! من امیدروارم که این روش تبدیل به یک روش استاندارد شود و ما دیگر نگران مرکزسازی در CSS نباشیم.