কিভাবে CSS এর মাধ্যমে এলিমেন্ট সেন্টার করবেন

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

কেন্দ্র পাঠ উপাদান অনুভূমিকভাবে

পাঠ্যকে অনুভূমিকভাবে কেন্দ্রীভূত করা সোজা সামনে। আমরা text-align ব্যবহার করি সম্পত্তি এবং এটিকে center এর একটি মান দিন .

h1 {
  text-align: center;
}

উপরের যে কোনো পাঠ্য এ কাজ করবে উপাদান।

সেন্টার ব্লক উপাদান (অ-টেক্সট) অনুভূমিকভাবে

যেকোন নন-টেক্সট উপাদানকে অনুভূমিকভাবে কেন্দ্রে রাখতে আমরা margin ব্যবহার করতে পারি সম্পত্তি এবং এটিকে auto এর একটি বাম এবং ডান মান দিন . এছাড়াও আমাদের উপাদানটির প্রস্থের মান উল্লেখ করতে হবে:

.center-horizontal {
  margin-left: auto;
  margin-right: auto;
  width: 100px; /* or max-content;*/
}

দ্রষ্টব্য:আপনি যদি আপনার কেন্দ্রীভূত উপাদানটিতে একটি নির্দিষ্ট প্রস্থের মান দিতে না চান তবে আপনি width: max-content ব্যবহার করতে পারেন — তাহলে আপনার উপাদানটি এর বিষয়বস্তুর প্রস্থ পর্যন্ত প্রসারিত হবে।

ব্লক বনাম ইনলাইন ব্লক উপাদান

.center-horizontal উপরের ক্লাস যেকোন ব্লক উপাদানকে কেন্দ্র করবে — কিন্তু ইনলাইন নয় উপাদান HTML এ, কিছু উপাদান ডিফল্টরূপে ইনলাইন উপাদান। <button> উদাহরণ স্বরূপ, একটি ডিফল্ট display: inline-block আছে শৈলী কিন্তু আপনি সহজেই display: block যোগ করে এটিকে একটি ব্লক উপাদানে পরিণত করতে পারেন আপনার CSS ক্লাসে:

.center-horizontal {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100px; /* or max-content;*/
}

এখন এটি যেকোনো উপাদানে কাজ করবে।

ফ্লেক্সবক্সের সাথে অনুভূমিকভাবে কেন্দ্র করুন

আধুনিক ফ্লেক্সবক্স সম্পত্তি অনুভূমিকভাবে কেন্দ্রীভূত করা সহজ। আপনার বর্তমান .center-horizontal প্রতিস্থাপন করুন এর সাথে ক্লাস:

.center-horizontal {
  display: flex;
  justify-content: center;
}

আপনি দেখতে পাচ্ছেন, আপনার <div> উপাদান কেন্দ্রীভূত হয়।

কিন্তু কিছু কারণে, আপনার বোতাম উপাদান না. কি দেয়?

আচ্ছা, <button> উপাদান হল একটি বিশেষ উপাদান যা <div> এর বিপরীতে উপাদান তথাকথিত ফ্লেক্স-কন্টেইনার হতে পারে না

কিন্তু বোতাম একটি ফ্লেক্স-আইটেম হতে পারে যার মানে হল যে আপনি যদি আপনার বোতামটি একটি ফ্লেক্স-কন্টেইনারের ভিতরে রাখেন, তাহলে কেন্দ্রীকরণ কাজ করবে। আপনার সম্পাদকে নিম্নলিখিত HTML যোগ করার চেষ্টা করুন:

<div class="center-horizontal">
  <button>Center me</button>
</div>

এখন এটা কাজ করছে! আমি এইমাত্র বোতাম উপাদান থেকে কেন্দ্র ক্লাসটি সরিয়েছি এবং এটি একটি মোড়ানো অভিভাবকের ভিতরে ব্যবহার করেছি <div> ধারক।

পরামর্শ:<img> উপাদানটি ফ্লেক্স-কন্টেইনারও হতে পারে না, তবে এটি বোতামের মতো একটি ফ্লেক্স-আইটেম হতে পারে।

-

উল্লম্বভাবে কেন্দ্রের উপাদানগুলি

সিএসএস নতুনদের সাধারণত উপাদানগুলিকে উল্লম্বভাবে কেন্দ্রীভূত করতে সমস্যা হয়। ফ্লেক্সবক্স এটিকে সহজ করে তোলে, কিন্তু ভাল পরিমাপের জন্য, প্রথমে দেখা যাক এটি পুরানো CSS পদ্ধতিগুলির সাথে কীভাবে কাজ করে।

আপনি ভাবতে পারেন যে আপনি মার্জিন-টপ এবং মার্জিন-বটম auto এর মতো কিছু ব্যবহার করতে পারেন — কিন্তু না।

উল্লম্ব কেন্দ্রে কাজ করার জন্য আপনার একটি নির্দিষ্ট উচ্চতা সহ একটি অভিভাবক ধারক থাকতে হবে। আপনার সম্পাদকে নিম্নলিখিত HTML যোগ করুন:

<section class="section">
  <div class="center-vertical">Center me vertically</div>
</section>

আপনার বিভাগের ক্লাসের জন্য এই CSS যোগ করুন (অভিভাবক):

.section {
  height: 200px;
  border: 1px solid black;
}

কি ঘটছে তা দেখতে সহজ করার জন্যই সীমানা।

এখন আপনার শিশু উপাদানের জন্য এই CSS যোগ করুন:

.center-vertical {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

সম্পন্ন!

ফ্লেক্সবক্স সহ উল্লম্বভাবে কেন্দ্র করুন

ফ্লেক্সবক্সের সাথে উপাদানগুলিকে উল্লম্বভাবে কেন্দ্রীভূত করতে, আমাদের একটি প্যারেন্ট ফ্লেক্স ধারক প্রয়োজন। আপনি center-vertical সরাতে পারেন পূর্ববর্তী উদাহরণ থেকে আপনার শিশু উপাদান থেকে ক্লাস. এখন আপনার .section-এ এই দুটি flexbox বৈশিষ্ট্য যোগ করুন ক্লাস, এই মত:

.section {
  height: 200px;
  border: 1px solid black;
  display: flex;
  align-items: center;
}

এবং এখন আপনার শিশু উপাদানটি ফ্লেক্সবক্সের সাথে উল্লম্বভাবে কেন্দ্রীভূত।

উল্লম্ব এবং অনুভূমিকভাবে কেন্দ্রের উপাদান

উল্লম্ব এবং অনুভূমিক উভয় উপাদান কেন্দ্রীভূত করতে আমাদের শুধুমাত্র কয়েকটি বৈশিষ্ট্য যোগ করতে হবে। চলুন পুরানো CSS পদ্ধতি দিয়ে শুরু করা যাক।

প্রথমে এই মার্কআপ যোগ করুন:

<section class="section">
  <div class="center-vertical-and-horizontal">
    Center me vertically & horizontally
  </div>
</section>

এবং CSS

.section {
  height: 200px;
  border: 1px solid black;
}

.center-vertical-and-horizontal {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
}

আপনি দেখতে পাচ্ছেন, এটি আগের থেকে "কেন্দ্রীয় উপাদানগুলি উল্লম্বভাবে" উদাহরণের (ফ্লেক্সবক্স ছাড়া) অনুরূপ। এখানে আমরা শুধু একটি left: 50% যোগ করছি ঘোষণা, এবং transform এর জন্য সম্পত্তি আমরা একটি ঘোষণায় X এবং Y অক্ষ উভয়ই নির্দিষ্ট করি:(-50%, -50%) . প্রথম মানটি হল X, দ্বিতীয়টি হল Y৷

ফ্লেক্সবক্স সহ উল্লম্বভাবে এবং অনুভূমিকভাবে কেন্দ্র করুন

অবশেষে, আসুন একই কৌশলটি করি, ফ্লেক্সবক্স ব্যবহার করে। আপনি center-vertical-and-horizontal সরাতে পারেন আপনার শিশু উপাদান থেকে ক্লাস। এখন আপনার .section এর জন্য ক্লাস নিম্নলিখিত CSS ব্যবহার করুন:

.section {
  height: 200px;
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
}

পূর্বের থেকে উল্লম্বভাবে এই উদাহরণ এবং কেন্দ্রের মধ্যে একমাত্র পার্থক্য হল justify-content: center ঘোষণা, যা অনুভূমিক কেন্দ্রীকরণ কাজ পরিচালনা করে।

CSS গ্রিডের সাথে অনুভূমিকভাবে এবং উল্লম্বভাবে কেন্দ্র করুন

ভালো পরিমাপের জন্য আসুন দেখি কিভাবে একটি আধুনিক-আধুনিক CSS গ্রিড প্রপার্টি উল্লম্ব এবং অনুভূমিক কেন্দ্রীকরণ পরিচালনা করে। আপনার .section প্রতিস্থাপন করুন এর সাথে ক্লাস:

.section {
  height: 200px;
  border: 1px solid black;
  display: grid;
  place-items: center;
}

মাত্র দুটি বৈশিষ্ট্য (display: grid &place-items:center ) CSS গ্রিড দিয়ে কাজ করে। খুব সুবিধাজনক!

দুর্ভাগ্যবশত, CSS গ্রিড সমস্ত আধুনিক ব্রাউজারে সামঞ্জস্যপূর্ণ নয়, এবং এটি অনেক জনপ্রিয় CMS/ফ্রেমওয়ার্কে 100% কাজ করে না, যেমন ওয়ার্ডপ্রেস — এখনও।

এখানে CSS গ্রিডের বর্তমান সামঞ্জস্যপূর্ণ অবস্থা দেখুন।