সিএসএস ট্রিকস – একটি ইমেজকে সেন্টার করার উপায়

আজ আমরা একটি সুসুওয়াতারি (Susuwatari) কে সেন্টার করার চেষ্টা করব। এই ছোট প্রাণীদেরকে সাধারণত 'সুট' (soots) বলা হয় এবং এগুলো খুব ঘামাড়। তাই আমাদের এটিকে নিরব এবং সেন্টারে রাখতে হবে যাতে এর ছবি তুলতে পারি। চলুন শুরু করি!

নোট: পড়ার সাথে সাথে, অনুগ্রহ করে ব্লগের রিপোজিটরি (repo) রেফার করুন।

HTML-এ আমাদের ইমেজ যোগ করা

ইমেজকে সেন্টার করার প্রয়োজনীয়তা খুবই সাধারণ। মনে করুন আমাদের একটি সুটের ছবি আছে এবং আমরা তা পরम्पরাগত img ট্যাগ দিয়ে যোগ করছি:

<img class="soot" src="soot.jpg" alt="soot!">

মনে রাখবেন: আপনার ইমেজ ট্যাগ লিখার সময় মনে রাখবেন যে এই ট্যাগের কোনো চাইল্ড নোড (child node) থাকতে পারে না, তাই আমরা এটিকে বন্ধ করি না। যদিও আপনার ব্রাউজার </img> ক্লোজিং ট্যাগ থাকলে শিকাযেতে পারে না, তবে সেটাতে প্রয়োগ করা CSS কাজ নাও করতে পারে। তাই উপরের কনভেনশনটি অনুসরণ করুন।

এখন, কোনো CSS ছাড়াই আমরা আমাদের ইমেজ যোগ করলে, পেজে তা নিচের মতো দেখাবে:

এটি হয় কারণ আমাদের ইমেজ পেজের ডিফল্ট ফ্লো (flow) অনুযায়ী পজিশন করা হয়েছে, যা এই কেসে বামপাশে, আমাদের টাইটেলের মতো।

সেন্টার করার পদ্ধতি ১: margin: 0 auto

আমাদের সুটকে সেন্টার করার সবচেয়ে সহজ উপায় হবে আমাদের img সিলেক্টরে নিচের স্টাইলিং প্রয়োগ করা:

img.soot { margin: 0 auto; display: block; }

এখানে আমরা আমাদের ইমেজ সিলেক্টরের সাথে ক্লাস নামটি যোগ করেছি বেশি স্পেসিফিসিটির (specificity) জন্য, যাতে যদি আমরা আরও সুট যোগ করি, তবে সেগুলোও সেন্টার্ড থাকে।

এখন আমাদের পেজ চেক করুন এবং হ্যাঁ, আমাদের ইমেজ সেন্টার হয়ে গেছে!

তাহলে কী হয়েছে?

• আমাদের margin এট্রিবিউট চারটি প্যারামিটার গ্রহণ করতে পারে, প্রথম দুটি টপ এবং বটমের জন্য এবং বাকি দুটি লেফট এবং রাইটের জন্য। এখানে আমরা ব্রাউজারকে বলছি যে লেফট এবং রাইট মার্জিন নিজে নির্ধারণ করুক, যা এই কেসে ব্রাউজার সেগুলো সমান সেট করে এবং এইভাবে ইমেজটি সেন্টার হয়।
• আমাদের display প্রপার্টির অনেক মান থাকতে পারে। এই কেসে আমরা 'block' বেছে নিয়েছি যা মূলত img এলিমেন্টকে বলছে পুরো चौড়াই নিতে এবং নিজস্ব লাইনে থাকতে। তাই যখন আমরা মার্জিন প্রয়োগ করি, তবে তা পুরো ইমেজের প্রস্থে প্রয়োগ হয়ে সেটাকে সেন্টার করে।

সেন্টার করার পদ্ধতি ২: text-align: center;

আমরা আমাদের সুটকে একটি প্যারেন্ট এলিমেন্টের ভিতরে রাখে সেন্টার করতে পারি। মনে করুন একটি div এবং তারপর প্যারেন্টে text-align প্রয়োগ করুন। আমাদের ইমেজকে অ্যালাইন করার জন্য নিশ্চিত করুন যে আপনি এটিকে প্যারেন্ট এলিমেন্টে (সাধারণত কন্টেইনার এলিমেন্ট বলা হয়) যোগ করেছেন:

.container { text-align: center; }

যেহেতু আমাদের div এলিমেন্ট স্বভাবতঃ একটি ব্লক কন্টেইনার, এটি পুরো প্রস্থ নেবে এবং এর চাইল্ডরা সেন্টার হবে, এই কেসে আমাদের সুট ইমেজ!

উপসংহার

Susuwatari উচ্চারণ করা মাথা ভালো লাগে (এটি একাধিকবার বলতে চেষ্টা করুন)। অন্যদিকে, ইমেজ সেন্টার করা, আসলে খুব সহজ সেটা কি!