مرکز قرار دادن در CSS

۵ تکنیک مرکزگرایی را دنبال کنید که ازطریق مجموعه‌ای از آزمایش‌ها بررسی می‌شوند تا ببینید کدام‌یک دربرابر تغییر مقاوم‌تر است.

Adam Argyle

مرکز قرار دادن در CSS چالشی بدنام است که با شوخی و تمسخر همراه است. ‫۲۰۲۰ CSS کاملاً رشد کرده است و اکنون می‌توانیم صادقانه به آن جوک‌ها بخندیم، نه با دندان‌های به‌هم‌فشرده.

اگر ویدیو را ترجیح می‌دهید، نسخه YouTube این پست را در اینجا ببینید:

چالش

انواع مختلفی از تراز کردن وجود دارد. From differing use cases, number of things to center, etc. In order to demonstrate a rationale behind "a winning" centering technique, I created The Resilience Ringer. این یک سری تست استرس برای هر استراتژی مرکزیت است تا در درون خود تعادل برقرار کند و شما عملکرد آن‌ها را مشاهده کنید. در پایان، تکنیکی را که بالاترین امتیاز را دارد و همچنین «ارزشمندترین» تکنیک را معرفی می‌کنم. امیدواریم با تکنیک‌ها و راه‌حل‌های جدیدی برای تمرکز کردن از این جلسه خارج شوید.

زنگ تاب‌آوری

‫Resilience Ringer نشان‌دهنده باورهای من است که یک استراتژی متمرکزسازی باید دربرابر طرح‌بندی‌های بین‌المللی، درگاه‌های دید با اندازه‌های متغیر، ویرایش‌های نوشتار، و محتوای پویا انعطاف‌پذیر باشد. این اصول به شکل‌گیری آزمون‌های تاب‌آوری زیر برای تکنیک‌های مرکزگرایی کمک کردند تا بتوانند دوام بیاورند:

  1. فشرده: مرکز کردن باید بتواند تغییرات عرض را مدیریت کند
  2. Squashed: centering should be able to handle changes to height
  3. تکراری: مرکز قرار دادن باید نسبت به تعداد موارد پویا باشد
  4. ویرایش: مرکز قرار دادن باید نسبت به طول و زبان محتوا پویا باشد
  5. Flow: centering should be document direction and writing mode agnostic

راهکار برنده باید انعطاف‌پذیری خود را با نگه داشتن محتوا در مرکز نشان دهد، درحالی‌که فشرده، له، تکرار، ویرایش، و به حالت‌ها و جهت‌های زبانی مختلف جابه‌جا می‌شود. مرکزی قابل‌اعتماد و انعطاف‌پذیر، مرکزی امن.

Legend

برای کمک به شما در حفظ برخی اطلاعات متا در بافت، چند راهنمایی رنگی بصری ارائه کرده‌ام:

  • حاشیه صورتی نشان‌دهنده مالکیت سبک‌های وسط‌چین است
  • چارگوش خاکستری پس‌زمینه محفظه است که می‌خواهد موارد را در مرکز قرار دهد
  • هر فرزند رنگ پس‌زمینه سفید دارد تا بتوانید هرگونه تأثیری را که تکنیک مرکزگرایی بر اندازه‌های جعبه فرزند دارد (درصورت وجود) ببینید

‫۵ شرکت‌کننده

۵ تکنیک تمرکز وارد «رینگ تاب‌آوری» می‌شوند، فقط یکی از آن‌ها «تاج تاب‌آوری» 👸 را دریافت خواهد کرد.

۱. مرکز محتوا

ویرایش و تکثیر محتوا با VisBug
  1. له کردن: عالی است!
  2. اسکواش: عالی!
  3. تکراری: عالی است!
  4. ویرایش: عالی!
  5. Flow: عالی!

سخت است که بتوانیم اختصار display: grid و place-content را شکست دهیم. ازآنجایی‌که این ویژگی فرزندان را به‌صورت جمعی در مرکز قرار می‌دهد و تراز می‌کند، تکنیک خوبی برای قرار دادن گروه‌هایی از عناصر در مرکز است که برای خوانده شدن درنظر گرفته شده‌اند.

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}
مزایا
  • محتوا حتی در فضای محدود و سرریز در مرکز قرار می‌گیرد
  • ویرایش‌های متمرکز و نگهداری همه در یک جا هستند
  • Gap فاصله مساوی بین n فرزند را تضمین می‌کند
  • شبکه به‌طور پیش‌فرض ردیف ایجاد می‌کند
معایب
  • پهن‌ترین فرزند (max-content) پهنا را برای بقیه تنظیم می‌کند. این موضوع در Gentle Flex بیشتر مورد بحث قرار خواهد گرفت.

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

۲. Gentle Flex

  1. Squish: عالی!
  2. اسکواش: عالی!
  3. تکراری: عالی است!
  4. ویرایش: عالی است!
  5. جریان: عالی!

Gentle Flex یک استراتژی واقعی‌تر فقط متمرکز است. این روش نرم و ملایم است، زیرا برخلاف place-content: center، هیچ اندازه جعبه فرزند درطول وسط‌چین کردن تغییر نمی‌کند. تا حد ممکن به‌آرامی، همه موارد روی‌هم چیده، وسط‌چین، و فاصله‌گذاری می‌شوند.

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}
مزایا
  • فقط تراز، جهت، و توزیع را مدیریت می‌کند
  • ویرایش‌ها و نگهداری همه در یک جا هستند
  • Gap فاصله مساوی بین n فرزند را تضمین می‌کند
معایب
  • بیشترین خطوط کد

عالی برای چیدمان‌های ماکرو و میکرو.

۳. Autobot

  1. Squish: عالی
  2. اسکواش: عالی
  3. تکراری: خوب
  4. ویرایش: عالی
  5. جریان: عالی

ظرف روی flex بدون سبک‌های تراز تنظیم شده است، درحالی‌که فرزندان مستقیم با حاشیه‌های خودکار سبک‌دهی شده‌اند. چیزی نوستالژیک و شگفت‌انگیز درباره margin: auto کار کردن روی همه طرف‌های عنصر وجود دارد.

.autobot {
  display: flex;
}
.autobot > * {
  margin: auto;
}
مزایا
  • ترفند جالب
  • سریع و کثیف
معایب
  • نتایج نامناسب هنگام سرریز شدن
  • اتکا به توزیع به‌جای فاصله به این معنی است که طرح‌بندی‌ها می‌توانند با لمس کردن کناره‌ها توسط فرزندان انجام شوند
  • «هل دادن» به موقعیت مطلوب به‌نظر نمی‌رسد و می‌تواند منجر به تغییر در اندازه جعبه فرزند شود

عالی برای وسط‌چین کردن نمادها یا شبه‌عناصر.

۴. مرکز کرکی

  1. له کردن: بد
  2. اسکواش: بد
  3. تکراری: بد
  4. ویرایش: عالی است!
  5. جریان: عالی! (تا زمانی که از ویژگی‌های منطقی استفاده کنید)

شرکت‌کننده «مرکز کرکی» تا اینجا خوشمزه‌ترین رقیب ما است و تنها تکنیک مرکزگذاری است که کاملاً متعلق به عنصر/فرزند است. حاشیه صورتی داخلی تکی ما را می‌بینید؟

.fluffy-center {
  padding: 10ch;
}
مزایا
  • از محتوا محافظت می‌کند
  • اتمی
  • هر آزمایشی به‌طور پنهانی حاوی این استراتژی متمرکزسازی است
  • فاصله کلمه شکاف است
معایب
  • توهم مفید نبودن
  • There's a clash between the container and the items, naturally since each are being very firm about their sizing

مناسب برای مرکز قرار دادن واژه یا عبارت، برچسب‌ها، قرص‌ها، دکمه‌ها، تراشه‌ها، و غیره.

۵. Pop & Plop

  1. له کردن: خوب
  2. اسکواش: خوب
  3. تکراری: بد
  4. ویرایش: خوب
  5. جریان: خوب

این «بیرون می‌زند» چون موقعیت‌یابی مطلق عنصر را از جریان عادی بیرون می‌زند. بخش «plop» (به‌معنی انداختن) در نام این ویژگی از زمانی می‌آید که من آن را بسیار مفید می‌دانم: انداختن آن روی چیزهای دیگر. این یک تکنیک کلاسیک و کاربردی برای مرکز قرار دادن هم‌پوشانی است که انعطاف‌پذیر و پویا نسبت به اندازه محتوا است. گاهی اوقات فقط لازم است واسط کاربر را روی واسط کاربر دیگری قرار دهید.

مزایا
  • مفید
  • قابل‌اطمینان
  • وقتی به آن نیاز دارید، بسیار ارزشمند است
معایب
  • کد با مقادیر درصد منفی
  • برای اجبار به بلوک حاوی، به position: relative نیاز دارد
  • شکستگی‌های خط زودهنگام و نامناسب
  • بدون تلاش بیشتر، فقط ۱ مورد در هر بلوک حاوی می‌تواند وجود داشته باشد

مناسب برای مدال‌ها، پیام‌های گذرا و پیام‌ها، پشته‌ها و جلوه‌های عمق، پاپ‌اورها.

برنده

اگر در جزیره‌ای بودم و فقط می‌توانستم ۱ تکنیک تمرکز داشته باشم، آن تکنیک… بود

[طبل زدن]

Gentle Flex 🎉

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}

همیشه می‌توانید آن را در برگه‌های سبک نگارش من پیدا کنید چون هم برای چیدمان‌های کلان و هم برای چیدمان‌های خرد مفید است. این یک راه‌حل همه‌جانبه قابل اعتماد با نتایجی است که با انتظارات من مطابقت دارد. همچنین، چون من معتاد به اندازه‌گذاری ذاتی هستم، معمولاً به این راه‌حل ارتقا پیدا می‌کنم. درست است، تایپ کردن آن زیاد است، اما مزایایی که ارائه می‌دهد بیشتر از کد اضافی است.

ارزشمندترین بازیکن

Fluffy Center

.fluffy-center {
  padding: 2ch;
}

Fluffy Center آن‌قدر کوچک است که به‌راحتی می‌توان آن را به‌عنوان یک تکنیک مرکزگرایی نادیده گرفت، اما این یک عنصر اصلی در استراتژی‌های مرکزگرایی من است. آن‌قدر اتمی است که گاهی فراموش می‌کنم دارم از آن استفاده می‌کنم.

نتیجه‌گیری

چه چیزهایی استراتژی‌های تمرکز شما را مختل می‌کنند؟ چه چالش‌های دیگری می‌تواند به زنگ تاب‌آوری اضافه شود؟ من ترجمه و یک کلید ارتفاع خودکار روی ظرف را درنظر گرفتم… چه چیز دیگری؟!

حالا که می‌دانید من چطور این کار را کردم، شما چطور این کار را می‌کنید؟! بیایید رویکردهایمان را متنوع کنیم و همه روش‌های ساختن در وب را یاد بگیریم. برای ایجاد نمونه مرکزگرایی خودتان، درست مانند نمونه‌های موجود در این پست، codelab را با این پست دنبال کنید. نسخه خودتان را برای من توییت کنید تا آن را به بخش ریمیکس‌های انجمن در زیر اضافه کنم.

ریمیکس‌های انجمن