কেন্দ্রীভূত আইটেমগুলির জন্য 3 সমসাময়িক CSS কৌশল

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

ঠিক আছে, চলুন এটা পেতে.

এটি সত্যিই একটি অদ্ভুত জিনিস যে ওয়েবে একটি পাত্রের কেন্দ্রে আইটেমগুলিকে এতদিন ধরে রাখা এত কঠিন ছিল। ঠিক আছে, অনুভূমিক কেন্দ্রীকরণ সহজ ছিল, কিন্তু সাম্প্রতিক বছর পর্যন্ত উল্লম্ব কেন্দ্রীকরণ প্রায় অসম্ভব ছিল।

কেন্দ্রের আইটেমগুলিতে CSS পজিশনিং ব্যবহার করা

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

এখানে আমাদের এই বাক্সটি রয়েছে যা আমরা লাল সীমানা সহ এই অন্য পাত্রে কেন্দ্র করতে চাই। এটি একটি শক্তিশালী উপাদান এবং এটি একটি div উপাদানের মধ্যে সরাসরি স্থাপন করা হয়েছে যা এই লাল বাক্সটি যা আমরা এখানে দেখছি।

আমরা এই পদ্ধতির জন্য পরম অবস্থান ব্যবহার করতে যাচ্ছি তাই আসুন এটিকে আমাদের strong উপাদানে যুক্ত করি।

 strong { position: absolute; }

এখন, এটি সঠিকভাবে কাজ করার জন্য, আমাদের div আমাদের আইটেমের অবস্থানের জন্য একটি পজিশনিং প্রসঙ্গ তৈরি করতে হবে। এটি করার বিভিন্ন উপায় রয়েছে তবে এই উদাহরণের জন্য সেরা বিকল্পটি আপেক্ষিক অবস্থান ব্যবহার করা।

 div { position: relative; }

এখন আমরা আমাদের উপাদানটিকে আমাদের div উচ্চতার পঞ্চাশ শতাংশ এবং প্রস্থের পঞ্চাশ শতাংশের বেশি নিচে অবস্থান করতে পারি। উপরে থেকে নিচে অবস্থান করতে আমরা নতুন লজিক্যাল প্রপার্টি, inset-block-start ব্যবহার করতে পারি যার মান পঞ্চাশ শতাংশ। এবং, বাম থেকে উপরে অবস্থান করতে আমরা পঞ্চাশ শতাংশের একই মান সহ inset-inline-start ব্যবহার করতে পারি।

 strong { ... inset-block-start: 50%; inset-inline-start: 50%; } 

ঠিক আছে, তাই এটা ঠিক কেন্দ্রীভূত নয়, তাই না?

ঠিক আছে, এর কারণ হল আমরা আইটেমটিকে আমাদের div এর কেন্দ্রে রেখেছি, কিন্তু এর অবস্থান তার উপরের বাম কোণে ভিত্তি করে। আমাদের এখন যা করতে হবে তা হল আইটেমটিকে তার উচ্চতার পঞ্চাশ শতাংশ এবং প্রস্থের পঞ্চাশ শতাংশের উপরে ফিরিয়ে আনা। এটি সঠিকভাবে কেন্দ্রে স্থাপন করা হবে। কিন্তু, আমরা কিভাবে এটা করতে পারি?

এটা আসলে সত্যিই সহজ. আমরা নতুন CSS translate সম্পত্তি ব্যবহার করতে পারি। প্রথম মানটি x-অক্ষ বরাবর অনুবাদ করবে। আমাদের পঞ্চাশ শতাংশ পিছনে যেতে হবে, তাই আমরা ঋণাত্মক পঞ্চাশ শতাংশের মান যোগ করব। এবং, দ্বিতীয় মানটি y-অক্ষ বরাবর অনুবাদ করে, আমরা এটিকে ঋণাত্মক পঞ্চাশ শতাংশের একই মান দেব।

 strong { ... translate: -50% -50%; } 

এবং আমরা সেখানে যাই. পুরোপুরি কেন্দ্রীভূত।

পজিশনিং এবং অনুবাদ ব্যবহার করে এখানে চূড়ান্ত কাজের উদাহরণ দেওয়া হল:

সুতরাং, এটি একটি উপায় যা আমরা এটি করতে পারি, তবে এটি আমার প্রিয় নয়।

ফ্লেক্সবক্স টু সেন্টার আইটেম ব্যবহার করা

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

ঠিক আছে, তাই আমরা একই বিন্দু থেকে শুরু করছি, লাল সীমানা সহ আমাদের বাইরের ডিভ এবং তারপরে আমাদের ভিতরের শক্তিশালী উপাদান রয়েছে।

আমরা ডিসপ্লে, ফ্লেক্স সহ আমাদের ডিভকে একটি ফ্লেক্স কন্টেইনার তৈরি করে শুরু করি। তারপরে আমরা আমাদের আইটেমটিকে justify-content প্রপার্টি এবং কেন্দ্রের মান দিয়ে x-অক্ষ বরাবর কেন্দ্রে সারিবদ্ধ করতে পারি। এবং শেষ কিন্তু অন্তত নয়, আমরা align-items বৈশিষ্ট্য এবং কেন্দ্রের একই মান দিয়ে y-অক্ষ বরাবর সারিবদ্ধ করতে পারি।

 div { display: flex; justify-content: center; align-items: center; } 

এবং সেখানে আপনার কাছে এটি আছে, আইটেমটি সঠিকভাবে কেন্দ্রীভূত এবং এটি এই সময় সেখানে পেতে কোডের মাত্র তিনটি লাইন নিয়েছে।

এখানে Flexbox ব্যবহার করে চূড়ান্ত কাজের উদাহরণ:

তাই এটি দুর্দান্ত এবং আমার মাঝে মাঝে এটি করার প্রয়োজন হয়, তবে কেন্দ্রে আইটেমগুলি স্থাপন করার আমার প্রিয় উপায় হল CSS গ্রিড ব্যবহার করা। এবং আবার, এর জন্য আমার কারণ হল এটি flex চেয়েও সহজ এবং এর জন্য আরও কম কোডের প্রয়োজন।

গ্রিড টু সেন্টার আইটেম ব্যবহার করে

ঠিক আছে, লাল বাক্স এবং ভিতরের আইটেমের সাথে একই সূচনা বিন্দু।

এইবার আমরা আমাদের ডিভকে grid একটি display মান সহ একটি গ্রিড ধারক বানাবো। এখন এখানে যা ভাল তা হল আমরা চাইলে একই দুটি বৈশিষ্ট্য ব্যবহার করতে পারি যা আমরা আমাদের ফ্লেক্সবক্স উদাহরণের জন্য ব্যবহার করেছি। আমরা justify-content: center এবং align-items: center । এটি একই সঠিক ভাবে কাজ করে।

 div { display: grid; justify-content: center; align-items: center; }

মজার ধরনের কিন্তু এটা ঠিক যেভাবে গ্রিড কাজ করে, এটি একই বক্স-সারিবদ্ধ বৈশিষ্ট্যগুলি ব্যবহার করতে পারে যা ফ্লেক্সবক্স করে। কিন্তু, যদি আমরা এইভাবে ছেড়ে দিতাম তাহলে গ্রিড ব্যবহার করার জন্য সত্যিই কোন সুবিধা থাকবে?

ঠিক আছে, এর পরিবর্তে আমরা যা করতে পারি তা হল, এই প্রান্তিককরণ বৈশিষ্ট্যগুলি সরিয়ে ফেলুন এবং স্থান-আইটেম বৈশিষ্ট্য দিয়ে তাদের প্রতিস্থাপন করুন। এবং, আমরা এই সম্পত্তি কেন্দ্র একটি মান দিতে পারেন.

 div { display: grid; place-items: center; } 

আমরা সেখানে যাই, এখন আমরা সিএসএসের মাত্র দুটি লাইনে এটিকে সম্পূর্ণভাবে কমিয়ে দিয়েছি।

এখানে CSS গ্রিড ব্যবহার করে চূড়ান্ত কাজের উদাহরণ:

উপসংহার

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