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

দ্বিতীয় স্ক্রিপ্ট উদাহরণ ব্যবহার করে CSS গ্রিড লেআউট নিয়োগ করে . সেট করে , পাঠ্যটি গ্রিড কন্টেইনারের মধ্যে অনুভূমিকভাবে এবং উল্লম্বভাবে কেন্দ্রীভূত হয়। CSS গ্রিড প্রথাগত পদ্ধতির তুলনায় ওয়েব লেআউট ডিজাইন করার জন্য আরও শক্তিশালী এবং নমনীয় সিস্টেম অফার করে। এটি সহজে জটিল, প্রতিক্রিয়াশীল ডিজাইন তৈরি করার ক্ষমতা প্রদান করে। দ্য কমান্ড হল উল্লম্ব এবং অনুভূমিক কেন্দ্রীকরণ অর্জনের একটি সংক্ষিপ্ত উপায়, কোডটি সরল করা এবং পঠনযোগ্যতা উন্নত করা।

#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>

#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>

#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>

#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 ট্রান্সফর্ম অন্বেষণ করা হচ্ছে

a এর মধ্যে টেক্সটকে উল্লম্বভাবে কেন্দ্রীভূত করার জন্য আরেকটি কার্যকর পদ্ধতি CSS ব্যবহার করছে সম্পত্তি মিশ্রন দ্বারা সঙ্গে transform: translateY(-50%);, আমরা সুনির্দিষ্ট উল্লম্ব প্রান্তিককরণ অর্জন করতে পারি। প্রথম, দ তৈরি একটি রেফারেন্স পয়েন্ট হিসাবে কাজ করতে। তারপর, সঙ্গে একটি শিশু উপাদান মূল কন্টেইনারের শীর্ষ 50% এ অবস্থান করা হয়। অবশেষে, আবেদন transform: translateY(-50%); উপাদানটিকে তার নিজস্ব উচ্চতার অর্ধেক উপরে নিয়ে যায়, পুরোপুরি উল্লম্বভাবে কেন্দ্র করে।

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

1. একটি div এ উল্লম্বভাবে কেন্দ্র পাঠের সবচেয়ে সহজ উপায় কি?
2. ব্যবহার সঙ্গে এবং প্রায়শই সবচেয়ে সহজ এবং সবচেয়ে কার্যকর পদ্ধতি।
3. পুরানো ব্রাউজারগুলিতে আপনি কীভাবে উল্লম্বভাবে পাঠ্যকে কেন্দ্র করেন?
4. সঙ্গে টেবিল প্রদর্শন পদ্ধতি ব্যবহার করে এবং পুরানো ব্রাউজারগুলিতে উল্লম্ব কেন্দ্রীকরণ অর্জনে সহায়তা করতে পারে।
5. CSS গ্রিড কি উল্লম্বভাবে পাঠ্য কেন্দ্রে ব্যবহার করা যেতে পারে?
6. হ্যাঁ, CSS গ্রিড টেক্সটকে উল্লম্বভাবে কেন্দ্রীভূত করতে পারে এবং .
7. এটা কি উল্লম্বভাবে মাল্টি লাইন টেক্সট কেন্দ্র করা সম্ভব?
8. হ্যাঁ, ফ্লেক্সবক্স বা সিএসএস গ্রিড ব্যবহার করে সহজেই বহু-লাইন পাঠ্যকে একটি পাত্রের মধ্যে উল্লম্বভাবে কেন্দ্রীভূত করা যায়।
9. আপনি কিভাবে একটি পরিচিত পাত্রের উচ্চতা সহ পাঠ্যকে উল্লম্বভাবে কেন্দ্র করবেন?
10. আপনি সেট করতে পারেন টেক্সটকে কেন্দ্র করে কার্যকরীভাবে কন্টেইনারের উচ্চতার সাথে মেলে সম্পত্তি।
11. ধারক উচ্চতা গতিশীল হলে কি হবে?
12. ফ্লেক্সবক্স, গ্রিড বা ব্যবহার করে সম্পত্তি সুসংগত উল্লম্ব কেন্দ্রীকরণ নিশ্চিত করে, এমনকি গতিশীল ধারক উচ্চতা সহ।
13. ব্যবহার করার কোন ত্রুটি আছে ?
14. কার্যকর হলেও, এটি পিতামাতার কাছে থাকা প্রয়োজন এবং ফ্লেক্সবক্স বা গ্রিডের তুলনায় প্রয়োগ করা কিছুটা জটিল হতে পারে।
15. কিভাবে আপনি একটি প্রতিক্রিয়াশীল ডিজাইনে টেক্সটকে উল্লম্বভাবে কেন্দ্রীভূত করবেন?
16. প্রতিক্রিয়াশীল ডিজাইনের জন্য ফ্লেক্সবক্স বা CSS গ্রিড ব্যবহার করা অত্যন্ত বাঞ্ছনীয়, কারণ এগুলি বিভিন্ন স্ক্রীনের আকার এবং অভিযোজনের সাথে ভালভাবে মানিয়ে নেয়।

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