٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

آموزش طرح بندی CSS – تراز افقی و عمودی

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

محمد یوسفی

12 جولای 2021

تراز وسط عناصر

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

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

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

مثال

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

توجه: در صورت widthعدم تنظیم ویژگی (یا تنظیم 100٪) تراز وسط هیچ تاثیری ندارد .


تراز کردن متن در مرکز

برای اینکه متن را درون یک عنصر قرار دهید ، از آن استفاده کنید text-align: center;

مثال

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

مرکز یک تصویر

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

مثال

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

تراز چپ و راست – با استفاده از موقعیت

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

 

 

 

مثال

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

توجه: عناصر موقعیتی مطلق از جریان طبیعی خارج می شوند و می توانند عناصر را با هم همپوشانی کنند.


تراز چپ و راست – با استفاده از شناور

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

مثال

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

پاک کردن هک

توجه: اگر عنصری بلندتر از عنصر حاوی آن باشد و شناور باشد ، در خارج از ظرف خود سرریز می کند. برای رفع این مشکل می توانید از “هک پاک کردن” استفاده کنید (به مثال زیر مراجعه کنید).

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

مثال

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

مرکز به صورت عمودی – با استفاده از padding

روشهای زیادی برای مرکزیت عمودی یک عنصر در CSS وجود دارد. یک راه حل ساده استفاده از بالا و پایین است 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خاصیت با مقداری است که برابر با heightویژگی است:

مثال

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

/* If the text has multiple lines, add the following: */
.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}

مرکز به صورت عمودی – با استفاده از موقعیت و تبدیل

اگر paddingو line-height اختیاری نیست، راه حل دیگری است برای موقعیت یابی استفاده و transformاموال:

مثال

.center {
  height: 200px;
  position: relative;
  border: 3px solid green;
}

.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

مرکز به صورت عمودی – با استفاده از Flexbox

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

مثال

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

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها