সিএসএস ব্যবহার করে একটি ডিভ-এ উল্লম্বভাবে পাঠ্য কেন্দ্রীভূত করা

উল্লম্ব কেন্দ্রীকরণের জন্য উন্নত CSS কৌশল

তৃতীয় স্ক্রিপ্টে, আমরা টেবিল প্রদর্শন পদ্ধতি ব্যবহার করি। বিন্যাস display: table; পাত্রে এবং display: table-cell; দিয়ে তৈরি একটি ছদ্ম-উপাদানের উপর ::before আমাদের ব্যবহার করার অনুমতি দেয় vertical-align: middle; সম্পত্তি এই পদ্ধতিটি টেবিল কক্ষের আচরণকে অনুকরণ করে, যার ফলে বিষয়বস্তুকে উল্লম্বভাবে কেন্দ্রীভূত করা সম্ভব হয়। যদিও এই পদ্ধতিটি আধুনিক ওয়েব ডিজাইনে কম ব্যবহৃত হয়, এটি পুরানো ব্রাউজারগুলির সাথে সামঞ্জস্য বজায় রাখার জন্য বা লিগ্যাসি কোডের সাথে কাজ করার সময় কার্যকর হতে পারে। এটি নতুন লেআউট সিস্টেমের উপর নির্ভর না করে বিষয়বস্তু কেন্দ্রে একটি নির্ভরযোগ্য উপায় প্রদান করে।

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

উল্লম্ব কেন্দ্রীকরণের জন্য ফ্লেক্সবক্স ব্যবহার করা

সিএসএস ফ্লেক্সবক্স

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div id="box">Lorem ipsum dolor sit</div>

উল্লম্ব কেন্দ্রীকরণের জন্য গ্রিড ব্যবহার করা

CSS গ্রিড

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: grid;
  place-items: center;
}
<div id="box">Lorem ipsum dolor sit</div>

উল্লম্ব কেন্দ্রীকরণের জন্য টেবিল ডিসপ্লে ব্যবহার করা

CSS টেবিল ডিসপ্লে

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: table;
}
#box::before {
  content: "";
  display: table-cell;
  vertical-align: middle;
}
#box > div {
  display: inline-block;
  vertical-align: middle;
}
<div id="box"><div>Lorem ipsum dolor sit</div></div>

উল্লম্ব কেন্দ্রীকরণের জন্য লাইনের উচ্চতা ব্যবহার করা

CSS লাইনের উচ্চতা

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  line-height: 170px;
  text-align: center;
}
<div id="box">Lorem ipsum dolor sit</div>

CSS-এ উল্লম্ব কেন্দ্রীকরণ সম্পর্কে সাধারণ প্রশ্ন

1. একটি div এ উল্লম্বভাবে কেন্দ্র পাঠের সবচেয়ে সহজ উপায় কি?
2. ব্যবহার display: flex; সঙ্গে justify-content: center; এবং align-items: center; প্রায়শই সবচেয়ে সহজ এবং সবচেয়ে কার্যকর পদ্ধতি।
3. পুরানো ব্রাউজারগুলিতে আপনি কীভাবে উল্লম্বভাবে পাঠ্যকে কেন্দ্র করেন?
4. সঙ্গে টেবিল প্রদর্শন পদ্ধতি ব্যবহার করে display: table; এবং vertical-align: middle; পুরানো ব্রাউজারগুলিতে উল্লম্ব কেন্দ্রীকরণ অর্জনে সহায়তা করতে পারে।
5. CSS গ্রিড কি উল্লম্বভাবে পাঠ্য কেন্দ্রে ব্যবহার করা যেতে পারে?
6. হ্যাঁ, CSS গ্রিড টেক্সটকে উল্লম্বভাবে কেন্দ্রীভূত করতে পারে display: grid; এবং place-items: center;.
7. এটা কি উল্লম্বভাবে মাল্টি লাইন টেক্সট কেন্দ্র করা সম্ভব?
8. হ্যাঁ, ফ্লেক্সবক্স বা সিএসএস গ্রিড ব্যবহার করে সহজেই বহু-লাইন পাঠ্যকে একটি পাত্রের মধ্যে উল্লম্বভাবে কেন্দ্রীভূত করা যায়।
9. আপনি কিভাবে একটি পরিচিত পাত্রের উচ্চতা সহ পাঠ্যকে উল্লম্বভাবে কেন্দ্র করবেন?
10. আপনি সেট করতে পারেন line-height টেক্সটকে কেন্দ্র করে কার্যকরীভাবে কন্টেইনারের উচ্চতার সাথে মেলে সম্পত্তি।
11. ধারক উচ্চতা গতিশীল হলে কি হবে?
12. ফ্লেক্সবক্স, গ্রিড বা ব্যবহার করে transform সম্পত্তি সুসংগত উল্লম্ব কেন্দ্রীকরণ নিশ্চিত করে, এমনকি গতিশীল ধারক উচ্চতা সহ।
13. ব্যবহার করার কোন ত্রুটি আছে transform: translateY(-50%);?
14. কার্যকর হলেও, এটি পিতামাতার কাছে থাকা প্রয়োজন position: relative; এবং ফ্লেক্সবক্স বা গ্রিডের তুলনায় প্রয়োগ করা কিছুটা জটিল হতে পারে।
15. কিভাবে আপনি একটি প্রতিক্রিয়াশীল ডিজাইনে টেক্সটকে উল্লম্বভাবে কেন্দ্রীভূত করবেন?
16. প্রতিক্রিয়াশীল ডিজাইনের জন্য ফ্লেক্সবক্স বা CSS গ্রিড ব্যবহার করা অত্যন্ত বাঞ্ছনীয়, কারণ এগুলি বিভিন্ন স্ক্রীনের আকার এবং অভিযোজনের সাথে ভালভাবে মানিয়ে নেয়।

উল্লম্ব কেন্দ্রে চূড়ান্ত চিন্তা

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