ترازبندی در css

ترازبندی در css مبحثی است که در این مقاله به آن می پردازیم:

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

برای وسط چین کردن عناصر block-level (مثل div) مراحل زیر را انجام می دهیم:

مقدار خصوصیت margin را برابر با auto قرار می دهیم (margin:auto)
با دادن عرض خاصی به المان، مانع از این می شویم که المان کل عرض عنصر دربرگیرنده خود را اشغال کند.
بدین صورت المان در مرکز قرار می گیرد و باقیمانده عرض، به صورت مساوی در دو طرف تقسیم می شود.

مثال:

Note: This div element is centered.

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

اگر مقدار width تعریف نشود یا برابر با %۱۰۰ باشد، المان وسط چین نمی شود.

ترازبندی متن در وسط

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

This text is centered

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

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

برای وسط قرار دادن یک عکس می بایست مقدار margin چپ و راست را برابر auto قرار دهیم و آن را تبدیل به یک عنصر block-level کنیم:

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

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

یک راه برای تراز کردن (align دادن)، استفاده از position: absolute; می باشد:

In my younger and more vulnerable years my father gave me some advice that I’ve been turning over in my mind ever since.

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

ویژگی position: absolute; باعث می شود المان از حالت معمولی در بیاید و می تواند باعث overlap شدن (تداخل) المان ها بشود.

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

راه دیگر برای ترازبندی المان، استفاده از float است:

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

اگر المانی بلندتر از المان دربرگیرنده خود باشد و float شود، از المان دربرگیرنده بیرون می زند که برای حل این مشکل می توانید از clearfix استفاده کنید.

می توانید overflow: auto; را اضافه کنید تا این مشکل برطرف شود.

.clearfix {
  overflow: auto;
}

برای مشاهده توضیحات بیشتر به آموزش float در css مراجعه نمایید.
قرار دادن المان در مرکز به صورت عمودی (Vertically) با استفاده از padding
راه های مختلفی برای انجام این کار وجود دارد که یکی از آن ها، دادن padding بالا و پایین به المان است:

I am vertically centered.

.center {
  padding: 70px 0;
  border: 3px solid green;
}

برای مرکز قرار دادن المان به صورت عمودی و افقی padding را تعریف کنید، همچنین text-align: center قرار دهید:

I am vertically and horizontally centered.

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

قرار دادن المان در مرکز به صورت عمودی با استفاده از line-height

یک روش دیگر تعیین line-height و مساوی قرار دادن مقدار آن با ویژگی height می باشد.

I am vertically and horizontally centered.

.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%);
}

برگرفته از :
www.w3schools.com