সিএসএস ব্যবহার করে কীভাবে অনুভূমিকভাবে একটি ডিভ কেন্দ্র করবেন

সিএসএস ব্যবহার করে কীভাবে অনুভূমিকভাবে একটি ডিভ কেন্দ্র করবেন
সিএসএস ব্যবহার করে কীভাবে অনুভূমিকভাবে একটি ডিভ কেন্দ্র করবেন
Mia Chevalier
রবিবার, ১৬ জুন, ২০২৪ ১:৩২:২২ AM

CSS এর সাথে ডিভ অ্যালাইনমেন্ট মাস্টারিং

CSS-এ অনুভূমিকভাবে উপাদান কেন্দ্রীভূত করা একটি সাধারণ কাজ যা ওয়েব ডেভেলপারদের সম্মুখীন হয়। এটি একটি বোতাম, একটি চিত্র, বা একটি ডিভ সারিবদ্ধ করা হোক না কেন, নিখুঁত প্রান্তিককরণ অর্জন করা কখনও কখনও কঠিন হতে পারে। এই নির্দেশিকায়, আমরা অনুভূমিকভাবে কেন্দ্রবিন্দুতে বিভিন্ন পদ্ধতি অন্বেষণ করব

অন্যের মধ্যে
CSS ব্যবহার করে।

এই কৌশলগুলি বোঝার এবং প্রয়োগ করার মাধ্যমে, আপনি নিশ্চিত করতে পারেন যে আপনার ওয়েব উপাদানগুলি যেখানে আপনি চান ঠিক সেখানে অবস্থান করছে৷ আমরা আপনাকে এই অপরিহার্য CSS দক্ষতার ব্যাপক বোঝার জন্য ফ্লেক্সবক্স, গ্রিড এবং ঐতিহ্যগত পদ্ধতি সহ বিভিন্ন পদ্ধতির কভার করব।

আদেশ বর্ণনা
display: flex; একটি ফ্লেক্স কন্টেইনার সংজ্ঞায়িত করে এবং ফ্লেক্সবক্স লেআউট সক্ষম করে।
justify-content: center; একটি ফ্লেক্স পাত্রের মধ্যে আইটেমগুলিকে অনুভূমিকভাবে কেন্দ্র করে।
align-items: center; একটি ফ্লেক্স পাত্রের মধ্যে আইটেমগুলিকে উল্লম্বভাবে কেন্দ্র করে।
place-items: center; একটি গ্রিড পাত্রে আইটেমগুলিকে অনুভূমিকভাবে এবং উল্লম্বভাবে কেন্দ্র করে।
transform: translate(-50%, -50%); একটি উপাদানকে কেন্দ্রে তার নিজস্ব প্রস্থ এবং উচ্চতার 50% স্থানান্তর করে।
position: absolute; একটি উপাদানকে তার নিকটতম অবস্থানকৃত পূর্বপুরুষের সাপেক্ষে অবস্থান করে।
top: 50%; একটি উপাদানকে এর ধারণকৃত উপাদানের শীর্ষ থেকে 50% অবস্থান করে।
left: 50%; একটি উপাদানকে এটির উপাদানটির বাম থেকে 50% অবস্থান করে।

ফ্লেক্সবক্স, গ্রিড এবং ঐতিহ্যবাহী CSS সহ কেন্দ্রীভূত উপাদান

প্রথম স্ক্রিপ্টটি দেখায় কিভাবে a কেন্দ্র করতে হয়

ব্যবহার Flexbox. সেট করে display: flex; মূল পাত্রে, শিশু উপাদানগুলি ফ্লেক্স আইটেম হয়ে যায়। দ্য justify-content: center; সম্পত্তি কেন্দ্র অনুভূমিকভাবে এই আইটেম, যখন align-items: center; তাদের উল্লম্বভাবে কেন্দ্র করে। এই পদ্ধতিটি অত্যন্ত বহুমুখী এবং গতিশীল লেআউটের জন্য ভাল কাজ করে।

দ্বিতীয় স্ক্রিপ্টে, আমরা ব্যবহার করি CSS Grid অনুরূপ ফলাফল অর্জন করতে। প্রয়োগের দ্বারা display: grid; মূল পাত্রে এবং place-items: center;, শিশু উপাদানগুলি অনুভূমিক এবং উল্লম্বভাবে কেন্দ্রীভূত হয়। এই পদ্ধতিটি গ্রিড-ভিত্তিক লেআউটের জন্য বিশেষভাবে উপযোগী। অবশেষে, ঐতিহ্যগত পদ্ধতি সেটিং জড়িত position: absolute; শিশু উপাদান এবং ব্যবহার top: 50%; এবং left: 50%; সঙ্গে transform: translate(-50%, -50%); পিতামাতার মধ্যে এটি কেন্দ্রীভূত করতে। এই পদ্ধতিটি নির্দিষ্ট আকারের উপাদানগুলির জন্য কার্যকর।

অনুভূমিকভাবে একটি Div কেন্দ্রে ফ্লেক্সবক্স ব্যবহার করা

ফ্লেক্সবক্স সহ এইচটিএমএল এবং সিএসএস

<!DOCTYPE html>
<html>
<head>
<title>Flexbox Centering</title>
<style>
#outer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  border: 1px solid black;
}
#inner {
  padding: 20px;
  background-color: lightblue;
  border: 1px solid blue;
}</style>
</head>
<body>
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
</body>
</html>

CSS গ্রিড সহ একটি Div কেন্দ্রীভূত করা

গ্রিড লেআউট সহ HTML এবং CSS

<!DOCTYPE html>
<html>
<head>
<title>Grid Centering</title>
<style>
#outer {
  display: grid;
  place-items: center;
  height: 100vh;
  border: 1px solid black;
}
#inner {
  padding: 20px;
  background-color: lightgreen;
  border: 1px solid green;
}</style>
</head>
<body>
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
</body>
</html>

CSS দিয়ে কেন্দ্রীভূত করার জন্য ঐতিহ্যবাহী পদ্ধতি

মার্জিন অটো সহ এইচটিএমএল এবং সিএসএস

<!DOCTYPE html>
<html>
<head>
<title>Traditional Centering</title>
<style>
#outer {
  width: 100%;
  height: 100vh;
  border: 1px solid black;
  position: relative;
}
#inner {
  width: 50px;
  padding: 20px;
  background-color: lightcoral;
  border: 1px solid red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}</style>
</head>
<body>
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
</body>
</html>

কেন্দ্রীভূত উপাদানের জন্য উন্নত কৌশল

একটি ধারক মধ্যে অনুভূমিকভাবে উপাদান কেন্দ্রীভূত করার জন্য আরেকটি পদ্ধতি ব্যবহার জড়িত text-align: center; সম্পত্তি এই পদ্ধতিটি ইনলাইন-ব্লক বা ইনলাইন উপাদানগুলির জন্য বিশেষভাবে কার্যকর। প্রয়োগের দ্বারা text-align: center; অভিভাবক কন্টেইনারে, সমস্ত শিশু উপাদান অনুভূমিকভাবে কেন্দ্রীভূত হবে। যাইহোক, এই পদ্ধতিটি ব্লক-স্তরের উপাদানগুলির জন্য কাজ করে না যদি না সেগুলি ইনলাইন-ব্লকে রূপান্তরিত হয়।

উপরন্তু, আপনি ব্যবহার করতে পারেন margin: auto; ব্লক-স্তরের উপাদান কেন্দ্রীভূত করার জন্য সম্পত্তি। একটি উপাদানের বাম এবং ডান মার্জিনগুলিকে স্বয়ংক্রিয়ভাবে সেট করে, আপনি এটিকে এর মূল পাত্রের মধ্যে অনুভূমিকভাবে কেন্দ্র করতে পারেন। এই কৌশলটি সহজ এবং স্থির-প্রস্থ উপাদানগুলির জন্য ভাল কাজ করে। ফ্লেক্সবক্স এবং গ্রিডের মতো আধুনিক CSS লেআউট কৌশলগুলির সাথে এই পদ্ধতিগুলিকে একত্রিত করা উপাদানগুলিকে প্রয়োজন অনুসারে সঠিকভাবে সারিবদ্ধ করার জন্য একটি ব্যাপক টুলকিট প্রদান করে।

কেন্দ্রীভূত উপাদান সম্পর্কে সাধারণ প্রশ্ন এবং উত্তর

  1. আমি কিভাবে একটি ইনলাইন উপাদান কেন্দ্র করব?
  2. ব্যবহার করুন text-align: center; ইনলাইন উপাদান কেন্দ্রে মূল কন্টেইনারে।
  3. আমি কি মার্জিন ব্যবহার করতে পারি: auto; একটি ব্লক উপাদান কেন্দ্রে?
  4. হ্যাঁ, সেটিং margin: auto; বাম এবং ডান দিকে একটি ব্লক উপাদান কেন্দ্রে থাকবে।
  5. কেন্দ্রীকরণের জন্য ফ্লেক্সবক্স এবং গ্রিডের মধ্যে পার্থক্য কী?
  6. Flexbox এক-মাত্রিক বিন্যাসের জন্য ব্যবহৃত হয়, যখন Grid দ্বি-মাত্রিক বিন্যাসের জন্য।
  7. আমি কিভাবে CSS এর সাথে একটি নির্দিষ্ট-প্রস্থ উপাদান কেন্দ্র করব?
  8. ব্যবহার করুন margin: auto; বা position: absolute; সঙ্গে transform: translate(-50%, -50%);
  9. আমি কি ফ্লেক্সবক্সের সাথে উপাদানগুলিকে উল্লম্বভাবে কেন্দ্র করতে পারি?
  10. হ্যাঁ, ব্যবহার করুন align-items: center; একটি ফ্লেক্স পাত্রে উল্লম্বভাবে কেন্দ্রে উপাদান.
  11. টেক্সট-সারিবদ্ধ করে: কেন্দ্র; ব্লক উপাদান জন্য কাজ?
  12. না, text-align: center; শুধুমাত্র ইনলাইন বা ইনলাইন-ব্লক উপাদানের জন্য কাজ করে।
  13. আমি কিভাবে একটি পাত্রে একাধিক উপাদান কেন্দ্র করব?
  14. ব্যবহার করুন display: flex; সঙ্গে justify-content: center; এবং align-items: center;
  15. স্থান-আইটেম কি: কেন্দ্র; গ্রিডে?
  16. place-items: center; একটি গ্রিড পাত্রে আইটেমগুলিকে অনুভূমিকভাবে এবং উল্লম্বভাবে কেন্দ্র করে।
  17. ফ্লেক্সবক্স বা গ্রিড ছাড়া উপাদানগুলিকে কেন্দ্র করা কি সম্ভব?
  18. হ্যাঁ, মত পদ্ধতি ব্যবহার করে margin: auto;, text-align: center;, বা position: absolute; উপাদান কেন্দ্রীভূত করতে পারেন।

সিএসএস কেন্দ্রীকরণ কৌশলগুলি মোড়ানো

বিভিন্ন CSS পদ্ধতি ব্যবহার করে অনুভূমিকভাবে উপাদানগুলিকে কীভাবে কেন্দ্রীভূত করা যায় তা বোঝা দৃশ্যত আকর্ষণীয় ওয়েব লেআউট তৈরি করার জন্য অপরিহার্য। মত কৌশল আয়ত্ত করে Flexbox, Grid, এবং traditional CSS বৈশিষ্ট্য, বিকাশকারীরা নিশ্চিত করতে পারে যে তাদের ডিজাইনগুলি কার্যকরী এবং নান্দনিকভাবে আনন্দদায়ক। এই পদ্ধতিগুলি নিয়ে পরীক্ষা-নিরীক্ষা করা CSS ক্ষমতাগুলির একটি গভীর উপলব্ধি প্রদান করবে।