 সহ আইটেমগুলিকে কেন্দ্রীভূত করা বেশ কঠিন ছিল। ওয়েল, এটা আর না. এখন এটা করার অনেক ভিন্ন উপায় আছে। এবং এটি একটি ভাল জিনিস কারণ আমাদের বিভিন্ন পরিস্থিতিতে বিভিন্ন বিকল্পের প্রয়োজন হতে পারে। এই ভিডিওতে আমরা আইটেমগুলিকে কেন্দ্র করে আমার তিনটি প্রিয় উপায় দেখব, আমরা পজিশনিং ব্যবহার করব, তারপরে আমরা ফ্লেক্সবক্স ব্যবহার করব এবং সবশেষে, আমরা আমার গো-টু সিএসএস গ্রিড ব্যবহার করব। এইচটিএমএল এবং সিএসএস  ঠিক আছে, চলুন এটা পেতে.   https://youtu.be/XMH4c1xIZtE?embedable=true  এটি সত্যিই একটি অদ্ভুত জিনিস যে ওয়েবে একটি পাত্রের কেন্দ্রে আইটেমগুলিকে এতদিন ধরে রাখা এত কঠিন ছিল। ঠিক আছে, অনুভূমিক কেন্দ্রীকরণ সহজ ছিল, কিন্তু সাম্প্রতিক বছর পর্যন্ত উল্লম্ব কেন্দ্রীকরণ প্রায় অসম্ভব ছিল।  কেন্দ্রের আইটেমগুলিতে 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   সম্পত্তি ব্যবহার করতে পারি। প্রথম মানটি x-অক্ষ বরাবর অনুবাদ করবে। আমাদের পঞ্চাশ শতাংশ পিছনে যেতে হবে, তাই আমরা ঋণাত্মক পঞ্চাশ শতাংশের মান যোগ করব। এবং, দ্বিতীয় মানটি y-অক্ষ বরাবর অনুবাদ করে, আমরা এটিকে ঋণাত্মক পঞ্চাশ শতাংশের একই মান দেব। translate     strong { ... translate: -50% -50%; }  এবং আমরা সেখানে যাই. পুরোপুরি কেন্দ্রীভূত।  পজিশনিং এবং অনুবাদ ব্যবহার করে এখানে চূড়ান্ত কাজের উদাহরণ দেওয়া হল:   https://codepen.io/brianmtreese/pen/PoLYmKW?embedable=true  সুতরাং, এটি একটি উপায় যা আমরা এটি করতে পারি, তবে এটি আমার প্রিয় নয়।  ফ্লেক্সবক্স টু সেন্টার আইটেম ব্যবহার করা  যদি আমি করতে পারি, আমি পজিশনিং এর উপর ফ্লেক্সবক্স ব্যবহার করতে পছন্দ করি কারণ এটি আরও সহজ, কোডের কম লাইন প্রয়োজন, কোন পজিশনিং প্রসঙ্গ নেই এবং সত্যই, এটি একটি ভাল, আরও আধুনিক সমাধানের মত মনে হয়। এর একটি উদাহরণ তাকান.  ঠিক আছে, তাই আমরা একই বিন্দু থেকে শুরু করছি, লাল সীমানা সহ আমাদের বাইরের ডিভ এবং তারপরে আমাদের ভিতরের শক্তিশালী উপাদান রয়েছে।   আমরা ডিসপ্লে, ফ্লেক্স সহ আমাদের ডিভকে একটি ফ্লেক্স কন্টেইনার তৈরি করে শুরু করি। তারপরে আমরা আমাদের আইটেমটিকে   প্রপার্টি এবং কেন্দ্রের মান দিয়ে x-অক্ষ বরাবর কেন্দ্রে সারিবদ্ধ করতে পারি। এবং শেষ কিন্তু অন্তত নয়, আমরা   বৈশিষ্ট্য এবং কেন্দ্রের একই মান দিয়ে y-অক্ষ বরাবর সারিবদ্ধ করতে পারি। justify-content align-items     div { display: flex; justify-content: center; align-items: center; }  এবং সেখানে আপনার কাছে এটি আছে, আইটেমটি সঠিকভাবে কেন্দ্রীভূত এবং এটি এই সময় সেখানে পেতে কোডের মাত্র তিনটি লাইন নিয়েছে।  এখানে Flexbox ব্যবহার করে চূড়ান্ত কাজের উদাহরণ:   https://codepen.io/brianmtreese/pen/bGZbWgW?embedable=true  তাই এটি দুর্দান্ত এবং আমার মাঝে মাঝে এটি করার প্রয়োজন হয়, তবে কেন্দ্রে আইটেমগুলি স্থাপন করার আমার প্রিয় উপায় হল 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 গ্রিড ব্যবহার করে চূড়ান্ত কাজের উদাহরণ:   https://codepen.io/brianmtreese/pen/zYbOwoM?embedable=true  উপসংহার  তাই যেমন আমি আগে বলেছি, এটি নিশ্চিত হওয়ার জন্য ব্যবহৃত হওয়ার চেয়ে অনেক সহজ। তবে এই সমস্ত কৌশলগুলি এখনও খুব প্রাসঙ্গিক এবং যে কোনও পরিস্থিতিতে প্রয়োজন হতে পারে তাই কেবল ক্ষেত্রেই সেগুলির সবগুলি জানা ভাল। আমি অবশ্যই ন্যূনতম পরিমাণ কোড সিএসএস গ্রিড পছন্দ করব, এবং যদি এটি পরবর্তী সেরা জিনিসটি ফ্লেক্সবক্সে কাজ না করে এবং যদি সেগুলির কোনটিই কাজ না করে তবে অবস্থান নির্ধারণের চেষ্টা করুন।  এছাড়াও   প্রকাশিত. এখানে

Buy Me a Coffee

গল্পের মূল ভাষায় এই অডিও তৈরি!

অতিদীর্ঘ; পড়তে

Make resilience your competitive advantage

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

About Author

মন্তব্য

আসে ট্যাগ

এই নিবন্ধটি উপস্থাপন করা হয়েছে

Related Stories

এআই/এমএল ডাটালেকের জন্য রেফারেন্স আর্কিটেকচার তৈরির জন্য একজন স্থপতির গাইড

ক্রিপ্টো গ্রোথ: কার্যকরী ব্যবহারকারী ব্যক্তিত্ব তৈরি করা

ফ্লোকির ভালহাল্লা ভারতের শ্রীলঙ্কা সফরের সহযোগী স্পনসর হিসেবে যোগ দিয়েছেন

বোল্টজম্যান ব্রেন থিওরির একটি সংক্ষিপ্ত ভূমিকা

এআই/এমএল ডাটালেকের জন্য রেফারেন্স আর্কিটেকচার তৈরির জন্য একজন স্থপতির গাইড

ক্রিপ্টো গ্রোথ: কার্যকরী ব্যবহারকারী ব্যক্তিত্ব তৈরি করা

ফ্লোকির ভালহাল্লা ভারতের শ্রীলঙ্কা সফরের সহযোগী স্পনসর হিসেবে যোগ দিয়েছেন

বোল্টজম্যান ব্রেন থিওরির একটি সংক্ষিপ্ত ভূমিকা

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps