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

গত পর্বে আমরা আলোচনা করেছিলাম floating elements তথা absolute এবং fixed এ্যালিমেন্টকে কিভাবে পার্ফেক্টলি centering করা যায় সে বিষয়ে। বলা বাহুল্য যে, floating elements তথা absolute এবং fixed এ্যালিমেন্ট ব্রাউজারে কোন জায়গা গ্রহণ করে না, বরং ভেসে থাকে, এই কারণেই এগুলোকে floating elements বলে।

আজকে আমরা centering করবো ঠিক এর বিপরীত এলিমেন্টকে, মানে- যে এলিমেন্ট ব্রাউজারে জায়গা নেয়- অর্থাৎ- relative এবং static এলিমেন্টকে আজকে আমরা centering করবো। আসলে এ ধরণের এলিমেন্ট অনেক বেশি ব্যবহার করা হয় এবং এগুলো centering করার অনেক অনেক পদ্ধতি আছে। আমরা আজকে এমন বিষয়গুলো নিয়েই আলোচনা করবো, যেগুলো সাধারণত আমাদের সমস্যার কারণ (ব্যক্তিগত অভিজ্ঞতা থেকে)।

centering inline and inline-block elements (x axis)

কোন block এলিমেন্টকে margin-left: auto; এবং margin-right: auto; দিয়ে দিলে সেটি x axis এ মাঝখানে চলে আসবে, এটি আমরা সবাই জানি। যারা জানতাম না, এখন জানলাম। কিন্তু ….

inline এবং inline-block এলিমেন্টকে x axis এ মাঝখানে আনার জন্য এই পদ্ধতি কাজ করে না। এমন কি, কোন inline বা inline-block এলিমেন্টকে আপনি যদি একটি নির্দিষ্ট width -ও দিয়ে নেন, তারপরও এই পদ্ধতি কাজ করবে না।

inline এবং inline-block এলিমেন্টকে x axis এ মাঝখানে আনতে সাধারণত আমি যে পদ্ধতিটি অবলম্বর করি, সেটি হচ্ছে, যে inline এবং inline-block এলিমেন্টটিকে আমি x axis এ মাঝখানে আনতে চাই, সেটিকে একটি block এলিমেন্টের মধ্যে নিয়ে নেই এবং সেই block এলিমেন্টকে text-align: center দিয়ে দেই, ব্যস …. এইটুকুই।

নিচের উদাহরণে কয়েকটি inline এবং inline-block এলিমেন্টকে margin এবং width এর মাধ্যমে x axis এ মাঝখানে আনার চেষ্টা করা হলো, যেটি সফল হয়নি। তারপর এই মাত্র বর্ণিত পদ্ধতিটি প্রয়োগ করে দেখানো হলো, যা সম্পূর্ণ সফল হয়েছে। উদাহরণটি বুঝতে চেষ্টা করুন, আশা করি সমস্যার সমাধান হবে।

বি:দ্র: বুটস্ট্র্যাপ ফ্রেমওয়ার্কে একটি ক্লাস আছে- .text-center নামে। আমি সাধারণত এই ক্লাসের মধ্যেই আমার inline এবং inline-block এলিমেন্টগুলো নেই। যখন বুটস্ট্র্যাপ ইউজ করি না, তখন আলাদা ক্লাস বানিয়ে নেই।

 

centering relative and static elements including inline, inline-block & block elements (y axis)

block এলিমেন্টকে x axis এ মাঝখানে আনতে হলে margin-left: auto; এবং margin-right: auto; ব্যবহার করলেই হবে, সেটা আগেই বললাম। আর floating এলিমেন্টগুলোর centering করার আলোচনা আগের পর্বে করা হয়েছে।

এখন আমরা দেখবো- relative, static, inline, inline-block এবং block – এইসব এলিমেন্টকে y axis বা vertically কিভাবে মাঝখানে আনা হয়।

vertically কোন এলিমেন্টকে মাঝখানে আনার জন্য css এর অনেক নতুন এবং শক্তিশালী প্রোপার্টি ও ভ্যালু আছে। কিন্তু সেগুলো এখনও সব ব্রাউজারে এবং সব ব্রাউজারের সব ভার্সনে সাপোর্ট করে না। এই জন্য আমরা এই কাজটি এমন কিছু CSS প্রোপার্টি ও ভ্যালু দিয়ে করবো, যেগুলো সব ব্রাউজারের সব ভার্সনে সাপোর্ট করে কোন সমস্যা ছাড়াই, এমন কি- প্রি-ফিক্সেরও দরকার হয় না। আর আমাদের সেই CSS প্রোপার্টিগুলো হলো-

  • display: table;
  • display: table-cell;
  • vertical-align: top;
  • vertical-align: middle;
  • vertical-align: bottom;

 

প্রথমেই display: table; নিয়ে একটু আলোচনা করি।  display: table;  আসলে  <table> ট্যাগের একটি ডিফোল্ট CSS সেটিংস। <table> ট্যাগের ডিফোল্ট CSS দেখার জন্য এই পেইজের যান, তারপর একদম নিচে দেখুন Default CSS Settings শিরোনামের নিচে <table> ট্যাগের ডিফোল্ট CSS দেয়া আছে।

আমরা যে <table> , <tr> , <td> ব্যবহার করি, এগুলো চাইলে আমরা <div> ট্যাগের মাধ্যমেও করতে পারি। কারণ <table> ট্যাগের স্ট্রাকচারের প্রায় অনেকখানি অংশই ডিফোল্ট CSS থেকে কন্ট্রোলে করা হয়। বেশি গভীরে না গিয়ে নিচের উদাহরণটি দেখি, তাহলে বিষয়টি পরিষ্কার হবে-

দুইটি টেবিল তৈরি করা হয়েছে। একটি করা হয়েছে <table> ট্যাগের মাধ্যমে, অপরটি করা হয়েছে  <div> ট্যাগ এবং inline-css এর মাধ্যমে।

আমরা এখন যে centering এর কাজটি করবো, সেটি যেহেতু  display: table এর মাধ্যমে করবো, তাই  <table> সম্পর্কে একটু সংক্ষিপ্ত আলোচনা করলাম। এখন বলি  display: table-cell সম্পর্কে কিছু কথা।

কোন block এলিম্যান্টেকে display: table-cell দিলে সেটি inline এলিমেন্টে রূপান্তরিত হয়। এখন আমরা যে কাজটি করতে যাচ্ছি, তার জন্য আমাদের মনে রাখতে হবে যে,  vertical-align: top/middle/bottom এমন এলিমেন্টেই কাজ করবে, যেটিতে  display: table-cell দেয়া আছে,  আর  display: table-cell এমন এলিমেন্টের চাইল্ড হিসেবেই কাজ করবে, যেটিতে  display: table দেয়া আছে। সুতরাং- আমাদের কাঙ্ক্ষিত এলিমেন্টটি রাখতে হবে দুইটি প্যারেন্ট এলিমেন্টের মধ্যে। প্রথম প্যারেন্ট এলিমেন্টটিতে দিতে হবে-  display: table এবং দ্বিতীয় প্যারেন্ট এলিমেন্টে দিতে হবে  display: table-cell  এবং vertical-align: middle;– এই দুটির ভিতরে রাখতে হবে আমাদের এলিমেন্টকে, যেটিকে আমরা ভার্টিক্যালি মিড্ল পজিশনে রাখতে চাই। নিচের উদাহরণে ভার্টিক্যালি টপ, মিড্ল এবং বটম পজিশনের আলাদা তিনটি উদাহরণ দেখানো হলো-

উদারহণটিতে খেয়াল করে দেখুন, যে এলিমেন্টগুলোতে display: table দেয়া হয়েছে, সেগুলোতে একটি নির্দিষ্ট height -ও দেয়া হয়েছে। কারণ … সিম্পল, x axis এর alignment এর জন্য যেমন স্পেস প্রয়োজন, যেটি আমরা  width এর মাধ্যমে তৈরি করি, বা  block এলিমেন্ট হলে এমনিতেই  width: 100%; হয়ে যায়, তেমনি- y axis বা ভার্টিক্যাল alignment এর জন্যও স্পেস-এর প্রয়োজন, যেটি আমরা  height এর মাধ্যমে তৈরি করবো।

এখন গুরুত্বপূর্ণ একটি প্রশ্ন। এর ব্যবহার কোথায়?

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

ওকে … তো আমরা এখন একটি ব্যানারের উদাহরণ দেখবো, যেটির ব্যাকগ্রাউন্ডে একটি ইমেজ থাকবে এবং এর কন্টেন্টগুলো থাকবে ভ্যার্টিক্যালি মিডল পজিশনে। যে পদ্ধতিটি উপরে বললাম, সেটিই অনুসরণ করা হবে এটিতে, অর্থাৎ-

.first-parent with display: table>.second-parent with display: table-cell and vertical-align: middle>.our-content

নিচের উদাহরণটি দেখুন, ভালভাবে স্পষ্ট হবে-

 

আমি যখন বুটস্ট্র্যাপ ইউজ করে এই কাজটি করতে গেছি, তখন একটা সমস্যায় পড়ছিলাম। সমস্যাটা তখনই হয়, যখন আমি বুটস্ট্র্যাপের .container ক্লাসটির মধ্যে আমার টেবিল এবং টেবিল-সেলের ক্লাসগুলো নেই। যখন বুঝতে পারি যে, এটিই সমস্যা, তখন .container ক্লাসটিকে টেবিল ও টেবিল-সেল ক্লাসের ভিতরে নিয়ে নেই, ব্যস … সমাধান হয়ে যায়। নিচে একই ব্যানার বুটস্ট্র্যাপ এর মাধ্যমে করে দেখানো হলো-

এ পর্যন্ত যে উদাহরণগুলো দেখানো হলো, সেগুলো বুঝতে পারলে-বিশেষভাবে শেষের দুইটা- যদি বুঝতে পারেন, তাহলে আশা করা যায় যে, কোন ফ্রেমওয়ার্কে, যে কোন স্লাইডারে এবং ব্যানারে, যে কোন এলিমেন্টে নিজের ইচ্ছেমত display: table, display: table-cell এবং vertical-align: top/middle/bottom ব্যবহার করে যে কোন non-floating element এর ভার্টিক্যাল alignment এর কাজ করতে পারবেন কোন ধরণের সমস্যা ছাড়া।

ইচ্ছা না থাকা সত্ত্বেও অনেক বড় হয়ে গেল পোস্টটি। আগামীতে আবার দেখা হবে, বিদায়।

মন্তব্য

মন্তব্য