centering floating elements

নতুন ফ্রন্ট-এন্ড ডেভলপারদের কিছু কমন প্রশ্ন এবং সেগুলোর উত্তর (পর্ব-২)

centering floating elements নিয়ে আজকে আমরা কথা বলবো। যেমন একাধিক পেইজের যে সাইটগুলো আছে, যেমন- ব্লগ, ই-কমার্স ইত্যাদি, এসব সাইটের হোম পেইজ ছাড়া যে পেইজগুলো থাকে, সেগুলোতে সাধারণত একটা path দেয়া থাকে যে, এই পেজটি হোম পেইজ থেকে কিভাবে তৈরি হলো, অনেকটা এ রকম-  (centering floating elements এর এটি একটি ছোট্ট উদাহরণ)।

Home > Blog > Single Blog

তো এই লিস্টটি তৈরি করতে নতুনরা অনেকে অনেক ধরণের পদ্ধতি অবলম্বন করে থাকেন। আমি নিজেও এটি নিয়ে অনেক খোঁজাখুঁজি করেছি যে, কিভাবে করলে এটির মধ্যে কোন খুঁত থাকবে না, কিভাবে করলে মাত্র একবার কোড করলেই হবে, তারপর যত আইটেমই যোগ হোক না কেন, সব একই স্টাইল পাবে।

অনেকেই সবগুলো li -কে একসাথে স্টাইল করে তারপর আবার li:last-of-type/child নিয়ে display:none; করেন, এভাবে-

li:before {...}

li:last-of-type:before {display: none;}

তো .. এভাবে দুইবার সিলেক্টর না নিয়ে, মাত্র একটি সিলেক্টর দিয়েই এই কাজটি করা যায়। আর সেটি হলো এরকম-

li:not(:last-of-type):before { ...}

এভাবে করলে দ্বিতীয় বার আরেকটি সিলেক্টর নিয়ে বলার দরকার নেই যে- display: none; আরও ভালভাবে বুঝার জন্য নিচের উদাহরণটি দেখুন-

৪র্থ প্রশ্ন – centering floating elements

centering floating elements মানে ভাসমান এ্যালিমেন্ট। আর ভাসমান এ্যালিমেন্ট বলতে এখানে বুঝাতে চাচ্ছি absolute এবং fixed এ্যালিমেন্টকে।

how to center an absolute element vertically অথবা horizontally, কিংবা
how to center an fixed element vertically অথবা horizontally লিখে গুগল করলে অনেক পদ্ধতি পাওয়া যাবে। এ বিষয়ে চাইলে অনেক অনেক পদ্ধতির কথা আলোচনা করা যায়। কারণ এখন CSS3 এর এমন অনেক নতুন নতুন প্রোপার্টি আর ভ্যালু আছে, যেগুলো এই কিছুদিন আগেও ছিল না, এবং এই প্রোপার্টি আর ভ্যালু দিয়ে খুব সহজেই যে কোন এলিম্যান্টকে যে কোন পজিশনে রাখা যায় খুব সহজে। যেমন- flex, grid ইত্যাদি।

কিন্তু এই নতুন প্রোপার্টি আর ভ্যালুগুলো সব ব্রাউজারে সাপোর্ট করে না। তাই আজকে আমরা এমন একটি পদ্ধতি দেখবো, যেটির মাধ্যমে আমরা যে কোন floating element কে পার্ফেক্টলি center করতে পারি।

এর জন্য CSS3 এর যে প্রোপার্টি আর ভ্যালু আমরা ব্যবহার করবো, সেটি হচ্ছে-

transform: translate();

floating element বলতে কি বুঝাচ্ছি, সেটি প্রথমেই বলেছি। প্রথমে আমরা আমাদের floating element-টিকে দুটি স্টাইল দেবো-

top: 50%;left: 50%;

এইটুকু স্টাইলের মাধ্যমে আমাদের floating element টি যে এলিমেন্ট -এর সাথে absolute বা fixed, সেই এলিমেন্টটির উপর থেকে এবং বাম থেকে পর্যাক্রমে 50% সরে আসবে। আর তারপরই আমরা আমাদের যে CSS3 এর প্রোপার্টির কথা বলেছিলাম সেটি যোগ করবো-

top: 50%;left: 50%;transform: translate(-50%, -50%);

এর দ্বারা আমাদের floating element তার নিজের x axis থেকে 50% বামে এবং y axis থেকে 50% উপরে চলে যাবে, যার ফলে আমাদের floating element টি নিঁখুতভাবে center এ চলে আসবে। আর কেউ যদি শুধু x axis বা শুধু y axis এ কোন floating element কে center করতে চায়, তাহলে তার জন্য নিচের পদ্ধতি অনুসরণ করা যায়-

(centering floating elements) x axis

left: 50%;transform: translateX(-50%);

(centering floating elements) y axis

top: 50%;transform: translateY(-50%);

নিচে তিনটির জন্য আলাদা আলাদা উদাহরণ দেয়া হলো, দেখে নিন –

নিজে প্র্যাক্টিস করুন। আজকে এখানেই শেষ করতে হচ্ছে। আগের পর্বটি এখানে পেয়ে যাবেন। আবার আসছি কিছুদিন পর।

মন্তব্য

মন্তব্য