CSS-এ সেন্টারিং

৫টি কেন্দ্রীকরণ কৌশল অনুসরণ করুন কারণ তারা পরিবর্তনের জন্য কোনটি সবচেয়ে স্থিতিস্থাপক তা দেখার জন্য একাধিক পরীক্ষার মধ্য দিয়ে যায়।

Adam Argyle

CSS-এ সেন্টারিং করা একটি কুখ্যাত চ্যালেঞ্জ, যা কৌতুক এবং উপহাসে পরিপূর্ণ। ২০২০ CSS এখন অনেক উন্নত হয়েছে এবং এখন আমরা সেইসব জোকস নিয়ে হাসতে পারি, দাঁতে দাঁত চেপে নয়।

আপনি ভিডিও দেখতে চাইলে, এই পোস্টের YouTube ভার্সন এখানে দেওয়া হল:

চ্যালেঞ্জ

বিভিন্ন ধরনের সেন্টারিং আছে। বিভিন্ন ব্যবহারের ক্ষেত্র, সেন্টারিং করার জন্য জিনিসের সংখ্যা ইত্যাদি। "একটি বিজয়ী" সেন্টারিং কৌশলের পিছনে একটি যুক্তি প্রদর্শন করার জন্য, আমি The Resilience Ringer তৈরি করেছি। এটি প্রতিটি সেন্টারিং স্ট্র্যাটেজির জন্য স্ট্রেস টেস্টের একটি সিরিজ যা ব্যালেন্স করতে এবং আপনি তাদের পারফরম্যান্স পর্যবেক্ষণ করতে পারেন। শেষে, আমি সবচেয়ে বেশি স্কোর করা টেকনিক এবং "সবচেয়ে মূল্যবান" টেকনিক প্রকাশ করি। আশা করি, আপনি নতুন সেন্টারিং টেকনিক ও সমাধান সম্পর্কে জানতে পারবেন।

রেসিলিয়েন্স রিঙ্গার

রেজিলিয়েন্স রিংগার হল আমার বিশ্বাসের একটি উপস্থাপনা যে একটি সেন্টারিং কৌশল আন্তর্জাতিক লেআউট, পরিবর্তনশীল আকারের ভিউপোর্ট, টেক্সট এডিট এবং ডাইনামিক কন্টেন্টের ক্ষেত্রে স্থিতিস্থাপক হওয়া উচিত। এই নীতিগুলি সেন্টারিং টেকনিকের জন্য নিম্নলিখিত রেজিলিয়েন্স টেস্টের রূপরেখা তৈরি করতে সাহায্য করেছে যাতে এটি দীর্ঘস্থায়ী হয়:

1. স্কুইশড: সেন্টারিং প্রস্থের পরিবর্তনগুলি পরিচালনা করতে সক্ষম হওয়া উচিত
2. স্কোয়াশড: সেন্টারিংয়ের মাধ্যমে উচ্চতার পরিবর্তন ম্যানেজ করা যাবে
3. ডুপ্লিকেট: আইটেমের সংখ্যার উপর ভিত্তি করে সেন্টারিং ডায়নামিক হতে হবে
4. এডিট: কন্টেন্টের দৈর্ঘ্য ও ভাষার উপর নির্ভর করে সেন্টারিং ডায়নামিক হতে হবে
5. Flow: সেন্টারিং ডকুমেন্টের দিকনির্দেশ এবং লেখার মোড অ্যাগনস্টিক হওয়া উচিত

জয়ী সমাধানকে তার স্থিতিস্থাপকতা প্রদর্শন করতে হবে। এর জন্য কন্টেন্টকে স্কুইশ, স্কোয়াশ, ডুপ্লিকেট, এডিট এবং বিভিন্ন ভাষা মোড ও ডিরেকশনে সোয়্যাপ করার সময় সেটিকে কেন্দ্রে রাখতে হবে। বিশ্বস্ত ও স্থিতিস্থাপক কেন্দ্র, একটি নিরাপদ কেন্দ্র।

Legend

কিছু মেটা তথ্য প্রসঙ্গে রাখার জন্য আমি আপনাকে সাহায্য করতে কিছু ভিজ্যুয়াল কালার হিন্টিং প্রদান করেছি:

• গোলাপী বর্ডার সেন্টারিং স্টাইলের মালিকানা নির্দেশ করে
• ধূসর রঙের বক্সটি হল কন্টেনারের ব্যাকগ্রাউন্ড, যেখানে আইটেমগুলি মাঝখানে রাখার চেষ্টা করা হয়
• প্রতিটি চাইল্ডের ব্যাকগ্রাউন্ডের রঙ সাদা যাতে আপনি চাইল্ড বক্সের সাইজে (যদি থাকে) সেন্টারিং টেকনিকের কোনও প্রভাব দেখতে পান

৫ জন প্রতিযোগী

৫টি সেন্টারিং টেকনিক রেজিলিয়েন্স রিংগারে প্রবেশ করে, শুধুমাত্র একটি রেজিলিয়েন্স ক্রাউন 👸 পাবে।

১. কন্টেন্ট সেন্টার

VisBug-এর সাহায্যে কন্টেন্ট এডিট ও ডুপ্লিকেট করা

1. স্কুইশ: দারুণ!
2. স্কোয়াশ: দারুণ!
3. ডুপ্লিকেট: দারুণ!
4. এডিট করুন: দারুণ!
5. Flow: দারুণ!

display: grid-এর সংক্ষিপ্ততা এবং place-content-এর শর্টহ্যান্ডকে হারানো কঠিন হবে। যেহেতু এটি বাচ্চাদের সম্মিলিতভাবে কেন্দ্র করে এবং জাস্টিফাই করে, তাই এটি পড়ার জন্য তৈরি করা এলিমেন্টের গ্রুপের জন্য একটি সলিড সেন্টারিং টেকনিক।

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}

সুবিধা

• সীমিত স্পেস এবং ওভারফ্লোর মধ্যেও কন্টেন্ট মাঝখানে থাকে
• এডিট ও রক্ষণাবেক্ষণ সংক্রান্ত সব কাজ এক জায়গায় করা যায়
• গ্যাপ n চিলড্রেনের মধ্যে সমান স্পেসিংয়ের গ্যারেন্টি দেয়
• গ্রিড ডিফল্ট হিসেবে সারি তৈরি করে

অসুবিধা

• সবচেয়ে চওড়া চাইল্ড (max-content) বাকি সবকটির প্রস্থ সেট করে। জেন্টেল ফ্লেক্স-এ এই বিষয়ে আরও আলোচনা করা হবে।

প্যারাগ্রাফ ও শিরোনাম, প্রোটোটাইপ বা সাধারণত যেসব জিনিসকে স্পষ্টভাবে কেন্দ্রে রাখতে হয়, সেগুলি সহ ম্যাক্রো লেআউটের জন্য উপযুক্ত।

মনে রাখবেন: place-content শুধুমাত্র display: grid-এর জন্য নয়। display: flex-এর ক্ষেত্রেও place-content ও place-item শর্টহ্যান্ড ব্যবহার করা যেতে পারে।

২. Gentle Flex

1. স্কুইশ: দারুণ!
2. স্কোয়াশ: দারুণ!
3. ডুপ্লিকেট: দারুণ!
4. এডিট: দারুণ!
5. Flow: দারুণ!

জেন্টল ফ্লেক্স হল আরও বেশি সেন্টারিং-অনলি স্ট্র্যাটেজি। এটি নরম এবং মৃদু, কারণ place-content: center-এর মতো নয়, সেন্টারিংয়ের সময় কোনও বাচ্চার বক্সের সাইজ পরিবর্তন করা হয় না। যতটা সম্ভব আলতোভাবে, সব আইটেম স্ট্যাক করা, কেন্দ্রে রাখা এবং স্পেস দেওয়া হয়।

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

সুবিধা

• শুধুমাত্র অ্যালাইনমেন্ট, দিকনির্দেশ ও ডিস্ট্রিবিউশন ম্যানেজ করে
• এডিট ও রক্ষণাবেক্ষণ সংক্রান্ত সব তথ্য এক জায়গায়
• গ্যাপ n চিলড্রেনের মধ্যে সমান স্পেসিংয়ের গ্যারেন্টি দেয়

অসুবিধা

• কোডের সবচেয়ে বেশি লাইন

ম্যাক্রো ও মাইক্রো লেআউট, দুটির জন্যই দারুণ।

মূল শব্দ: ম্যাক্রো লেআউট হল কোনও দেশের রাজ্য বা অঞ্চলের মতো: খুব উচ্চ-লেভেল, বড় কভারেজ জোন। ম্যাক্রো লেআউটের মাধ্যমে তৈরি করা জোনে সাধারণত আরও লেআউট থাকে। লেআউট যত কম সারফেস কভার করে, এটি তত কম ম্যাক্রো লেআউট হয়ে ওঠে। কোনও লে-আউট কম সারফেস এরিয়া কভার করলে বা কম লে-আউট থাকলে, সেটি আরও বেশি মাইক্রো লে-আউট হয়ে যায়।

৩. Autobot

1. স্কুইশ: দারুণ
2. স্কোয়াশ: দারুণ
3. ডুপ্লিকেট: ঠিক আছে
4. এডিট: দারুণ
5. ফ্লো: দারুণ

কন্টেনারটি কোনও অ্যালাইনমেন্ট স্টাইল ছাড়াই ফ্লেক্স করার জন্য সেট করা হয়েছে, যখন ডাইরেক্ট চিলড্রেন অটো মার্জিন দিয়ে স্টাইল করা হয়। margin: auto-এর এলিমেন্টের সব দিক নিয়ে কাজ করার মধ্যে নস্টালজিক ও চমৎকার কিছু আছে।

.autobot {
  display: flex;
}
.autobot > * {
  margin: auto;
}

সুবিধা

• মজার ট্রিক
• দ্রুত ও নোংরা

অসুবিধা

• ওভারফ্লো করার সময় অদ্ভুত ফলাফল
• গ্যাপের পরিবর্তে ডিস্ট্রিবিউশনের উপর নির্ভর করার অর্থ হল লেআউটগুলি এমনভাবে তৈরি হতে পারে যেখানে চাইল্ড ভিউগুলি একে অপরের সাথে লেগে থাকে
• Being "pushed" into position doesn't seem optimal and can result in a change to the child's box size

আইকন বা ছদ্ম-এলিমেন্টকে কেন্দ্রে নিয়ে আসার জন্য দারুণ।

৪. ফ্লাফি সেন্টার

1. স্কুইশ: খারাপ
2. স্কোয়াশ: খারাপ
3. ডুপ্লিকেট: খারাপ
4. এডিট: দারুণ!
5. Flow: দারুণ! (যতক্ষণ আপনি লজিক্যাল প্রপার্টি ব্যবহার করছেন)

প্রতিযোগী "ফ্লাফি সেন্টার" এখন পর্যন্ত আমাদের সবচেয়ে সুস্বাদু প্রতিযোগী এবং এটিই একমাত্র সেন্টারিং টেকনিক যা সম্পূর্ণরূপে এলিমেন্ট/চাইল্ডের মালিকানাধীন। আমাদের সোলো ইনার পিঙ্ক বর্ডার দেখেছেন!?

.fluffy-center {
  padding: 10ch;
}

সুবিধা

• কন্টেন্ট সুরক্ষিত রাখে
• পারমাণবিক
• প্রতিটি টেস্টে এই সেন্টারিং স্ট্র্যাটেজি গোপনে অন্তর্ভুক্ত করা আছে
• শব্দের মধ্যে ব্যবধান হল ফাঁক

অসুবিধা

• উপযোগী না হওয়ার বিভ্রম
• কন্টেনার এবং আইটেমের মধ্যে একটি সংঘর্ষ হয়, স্বাভাবিকভাবেই যেহেতু প্রতিটি তাদের সাইজিং সম্পর্কে খুব দৃঢ় হচ্ছে

শব্দ বা বাক্যাংশ-কেন্দ্রিক সেন্টারিং, ট্যাগ, পিল, বোতাম, চিপ এবং আরও অনেক কিছুর জন্য দারুণ।

৫. পপ ও প্লপ

1. স্কুইশ: ঠিক আছে
2. স্কোয়াশ: ঠিক আছে
3. ডুপ্লিকেট: খারাপ
4. এডিট করুন: ঠিক আছে
5. ফ্লো: ঠিক আছে

এটি "পপ" করে কারণ অ্যাবসলিউট পজিশনিং এলিমেন্টকে স্বাভাবিক ফ্লো থেকে পপ আউট করে। নামের "প্লাপ" অংশটি এসেছে যখন আমি এটি সবচেয়ে দরকারী বলে মনে করি: অন্যান্য জিনিসের উপরে এটি প্লাপ করা। এটি একটি ক্লাসিক এবং সহজ ওভারলে সেন্টারিং টেকনিক যা কন্টেন্টের সাইজের সাথে মানানসই এবং ডায়নামিক। কখনও কখনও আপনাকে অন্য UI-এর উপরে UI রাখতে হয়।

সুবিধা

• উপযোগী
• নির্ভরযোগ্য
• যখন আপনার এটি প্রয়োজন হবে, তখন এটি অমূল্য হয়ে উঠবে

অসুবিধা

• নেগেটিভ শতাংশের মান সহ কোড
• কন্টেনিং ব্লক জোর করে প্রয়োগ করতে position: relative প্রয়োজন
• আগেভাগে এবং অদ্ভুতভাবে লাইন ব্রেক করা
• অতিরিক্ত প্রচেষ্টা ছাড়াই প্রতিটি কন্টেনিং ব্লকে শুধুমাত্র ১টি থাকতে পারে

এগুলির জন্য দারুণ: মোডাল, টোস্ট ও মেসেজ, স্ট্যাক ও ডেপথ এফেক্ট, পপওভার।

বিজয়ী

আমি যদি কোনও দ্বীপে থাকতাম এবং আমার কাছে মাত্র ১টি সেন্টারিং টেকনিক থাকত, তাহলে সেটি হতো…

[ড্রাম রোল]

জেন্টল ফ্লেক্স 🎉

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

আপনি সবসময় আমার স্টাইলশিটে এটি খুঁজে পাবেন কারণ এটি ম্যাক্রো ও মাইক্রো লেআউট, উভয়ের জন্যই উপযোগী। এটি সব দিক থেকে নির্ভরযোগ্য সমাধান এবং এর ফলাফল আমার প্রত্যাশার সাথে মেলে। এছাড়াও, যেহেতু আমি একজন অন্তর্নিহিত সাইজিং জাঙ্কি, তাই আমি এই সমাধানে স্নাতক হতে চাই। হ্যাঁ, এটি টাইপ করতে অনেক সময় লাগে, তবে এটি যে সুবিধা প্রদান করে তা অতিরিক্ত কোডের চেয়ে অনেক বেশি।

MVP

Fluffy Center

.fluffy-center {
  padding: 2ch;
}

ফ্লাফি সেন্টার এতটাই মাইক্রো যে সেন্টারিং টেকনিক হিসেবে এটিকে সহজেই উপেক্ষা করা যায়, তবে এটি আমার সেন্টারিং স্ট্র্যাটেজির একটি প্রধান অংশ। এটি এতটাই অ্যাটমিক যে মাঝে মাঝে আমি ভুলে যাই যে আমি এটি ব্যবহার করছি।

উপসংহার

কোন ধরনের জিনিস আপনার সেন্টারিং স্ট্র্যাটেজিকে ভেঙে দেয়? রেজিলিয়েন্স রিংগারে আর কী কী চ্যালেঞ্জ যোগ করা যেতে পারে? আমি অনুবাদ এবং কন্টেনারে অটো-হাইট সুইচ বিবেচনা করেছি… আর কী!?

আমি কীভাবে করেছি তা তো জানলে, তুমি কীভাবে করবে?! আসুন, আমাদের দৃষ্টিভঙ্গিকে আরও বৈচিত্র্যময় করে তুলি এবং ওয়েবে তৈরি করার সব উপায় সম্পর্কে জানি। এই পোস্টের সাথে কোডল্যাব অনুসরণ করে আপনার নিজস্ব সেন্টারিং উদাহরণ তৈরি করুন, ঠিক এই পোস্টের মতো। আপনার ভার্সনটি আমাকে টুইট করুন এবং আমি এটি নিচের কমিউনিটি রিমিক্স বিভাগে যোগ করব।

কমিউনিটি রিমিক্স

• ব্লগ পোস্ট সহ CSS ট্রিক