CSS এ কেন্দ্রীভূত করা

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

Adam Argyle

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

আপনি যদি ভিডিও পছন্দ করেন তবে এখানে এই পোস্টটির একটি YouTube সংস্করণ রয়েছে:

চ্যালেঞ্জ

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

স্থিতিস্থাপক রিংগার

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

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

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

কিংবদন্তি

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

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

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

5টি কেন্দ্রীকরণ কৌশল স্থিতিস্থাপক রিংগারে প্রবেশ করে, শুধুমাত্র একটি স্থিতিস্থাপক মুকুট 👸 পাবে।

1. বিষয়বস্তু কেন্দ্র

VisBug- এর সাথে বিষয়বস্তু সম্পাদনা এবং নকল করা

1. স্কুইশ : দুর্দান্ত!
2. স্কোয়াশ : দুর্দান্ত!
3. সদৃশ : দুর্দান্ত!
4. সম্পাদনা করুন : দুর্দান্ত!
5. প্রবাহ : দুর্দান্ত!

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 শর্টহ্যান্ড থেকেও উপকৃত হতে পারে।

2. মৃদু ফ্লেক্স

1. স্কুইশ: দুর্দান্ত!
2. স্কোয়াশ: দুর্দান্ত!
3. সদৃশ: দুর্দান্ত!
4. সম্পাদনা করুন: দুর্দান্ত!
5. প্রবাহ: দুর্দান্ত!

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

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

পেশাদার

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

কনস

• কোডের বেশিরভাগ লাইন

ম্যাক্রো এবং মাইক্রো উভয় লেআউটের জন্য দুর্দান্ত ।

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

3. অটোবট

1. স্কুইশ: দুর্দান্ত
2. স্কোয়াশ: দুর্দান্ত
3. সদৃশ: জরিমানা
4. সম্পাদনা করুন: দুর্দান্ত
5. প্রবাহ: মহান

কন্টেইনারটি কোন প্রান্তিককরণ শৈলী ছাড়াই ফ্লেক্সে সেট করা হয়েছে, যখন সরাসরি শিশুদের স্বয়ংক্রিয় মার্জিন দিয়ে স্টাইল করা হয়েছে। margin: auto কাজ করা।

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

পেশাদার

• মজার কৌশল
• দ্রুত এবং ময়লা

কনস

• উপচে পড়লে বিশ্রী ফলাফল
• ব্যবধানের পরিবর্তে বন্টনের উপর নির্ভর করার অর্থ হল লেআউটগুলি বাচ্চাদের পাশে স্পর্শ করার সাথে ঘটতে পারে
• অবস্থানে "ঠেলে দেওয়া" সর্বোত্তম বলে মনে হয় না এবং এর ফলে সন্তানের বাক্সের আকার পরিবর্তন হতে পারে

আইকন বা ছদ্ম-উপাদান কেন্দ্রীভূত করার জন্য দুর্দান্ত ।

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

1. স্কুইশ: খারাপ
2. স্কোয়াশ: খারাপ
3. সদৃশ: খারাপ
4. সম্পাদনা করুন: দুর্দান্ত!
5. প্রবাহ: দুর্দান্ত! (যতক্ষণ আপনি যৌক্তিক বৈশিষ্ট্য ব্যবহার করেন)

প্রতিযোগী "ফ্লফি সেন্টার" এখন পর্যন্ত আমাদের সবচেয়ে সুস্বাদু শব্দের প্রতিযোগী, এবং একমাত্র কেন্দ্রীকরণ কৌশল যা সম্পূর্ণ উপাদান/শিশুর মালিকানাধীন। আমাদের একক ভিতরের গোলাপী সীমানা দেখুন!?

.fluffy-center {
  padding: 10ch;
}

পেশাদার

• বিষয়বস্তু রক্ষা করে
• পরমাণু
• প্রতিটি পরীক্ষা গোপনে এই কেন্দ্রীকরণ কৌশল ধারণ করে
• শব্দ স্থান ফাঁক

কনস

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

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

5. পপ এবং প্লপ

1. স্কুইশ: ঠিক আছে
2. স্কোয়াশ: ঠিক আছে
3. সদৃশ: খারাপ
4. সম্পাদনা করুন: ভাল
5. প্রবাহ: জরিমানা

এই "পপস" কারণ পরম পজিশনিং উপাদানটিকে স্বাভাবিক প্রবাহের বাইরে পপ করে। নামগুলির "প্লপ" অংশটি আসে যখন আমি এটিকে সবচেয়ে দরকারী বলে মনে করি: এটিকে অন্যান্য জিনিসের উপরে প্লপ করা। এটি একটি ক্লাসিক এবং সহজ ওভারলে কেন্দ্রীকরণ কৌশল যা নমনীয় এবং বিষয়বস্তুর আকারে গতিশীল। কখনও কখনও আপনাকে অন্য UI এর উপরে UI প্লপ করতে হবে।

পেশাদার

• দরকারী
• নির্ভরযোগ্য
• যখন আপনি এটি প্রয়োজন, এটি অমূল্য

কনস

• ঋণাত্মক শতাংশ মান সহ কোড
• position: relative
• প্রারম্ভিক এবং বিশ্রী লাইন বিরতি
• অতিরিক্ত প্রচেষ্টা ছাড়াই প্রতি ধারণকৃত ব্লকে মাত্র 1টি হতে পারে

মডেল, টোস্ট এবং বার্তা, স্ট্যাক এবং গভীরতা প্রভাব, পপোভারের জন্য দুর্দান্ত ।

বিজয়ী

আমি যদি একটি দ্বীপে থাকতাম এবং শুধুমাত্র 1টি কেন্দ্রীকরণ কৌশল থাকতে পারতাম, তাহলে তা হবে...

[ড্রাম রোল]

মৃদু ফ্লেক্স 🎉

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

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

এমভিপি

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

.fluffy-center {
  padding: 2ch;
}

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

উপসংহার

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

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

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

• একটি ব্লগ পোস্টের সাথে CSS কৌশল