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

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;
}

منبع

مقاله‌های مشابه

7 مرحله فروش بیمه عمر (2)

7 مرحله فروش بیمه عمر (2)

18/9/96 چه بلایی سر آدم میاره خیلی جالبه انقدر سنگ، توام داری درست راه میری اینجوری لنگ میزنی، وقتی یه ذره زمانش طولانی تر بشه دیگه لنگ نمیزنی مجبوری اینجوری کنی من دیگه نمیتونم بیام یه ذره میشینی پامیشی، فروش اینو خیلیها حذف میکنن، برای خیلیها تو ذهنشون همون سنگه...

بیشتر بخوانید
7 مرحله فروش بیمه عمر (1)

7 مرحله فروش بیمه عمر (1)

11/9/96 امروز میخوایم 7 مرحله فروش بیمه عمر یا هر محصولی که شما در کل کره زمین میشناسید، وقتی میگم محصول یه روز این محصولی که داریم ازش صحبت میکنیم میتونه هر چیزی به چیزی بجز بیمه عمر باشه، یکی از مهمترین مباحثی که در دوره تکنسین یاد میگیرید و عملاً آچارفرانسه تمام...

بیشتر بخوانید

شما هم به جمع ۱۰۰,۰۰۰ مشترک خبرنامه‌ ما بپیونید

0 دیدگاه

یک دیدگاه بنویسید

نشانی ایمیل شما منتشر نخواهد شد.