মূলঃ How to Center an Image Vertically and Horizontally with CSS, লেখকঃ Cem Eygi

অনেক ডেভেলপারই ইমেজ নিয়ে কাজ করার সময় চ্যালেঞ্জের মুখোমুখি হন। রেসপন্সিভনেস এবং অ্যালাইনমেন্ট ঠিক রাখা কঠিন হয়ে পরে। বিশেষ করে একটি ইমেজকে পেজের ঠিক মাঝখানে সেন্টার করানোর কাজটা।

তাই এই পোস্টে আমি আপনাদের বিভিন্ন CSS প্রপার্টি ব্যবহার করে একটি ইমেজকে ভার্টিক্যালি এবং হরাইযন্টালি সেন্টার করার একাধিক উপায় দেখাবো।

আমি আমার আগের পোস্টে CSS Position এবং Display প্রপার্টিসমূহ নিয়ে আলোচনা করেছি। আপনি যদি এই বিষয়গুলির সাথে পরিচিত না হয়ে থাকেন তাহলে আগের পোস্টগুলি পড়ে দেখতে পারেন।

আপনি যদি পড়ার থেকে ভিডিও দেখে শিখতে বেশি পছন্দ করেন তাহলে নিচে এই আর্টিকেলের ভিডিও সংস্করণটি দেখতে পারেনঃ

একটি ইমেজকে হরাইযন্টালি সেন্টার করা

চলুন তাহলে একটি ইমেজকে হরাইযন্টালি সেন্টার করার মাধ্যমে কাজ শুরু করা যাক। এখানে আমি ৩টি ভিন্ন ভিন্ন CSS প্রপার্টির মাধ্যমে ইমেজকে সেন্টার করে দেখাবো।

Text-Align

হরাইযন্টালি একটি ইমেজকে সেন্টার করার প্রথম পদ্ধতি হল text-align প্রপার্টি। তবে এই পদ্ধতি শুধু মাত্র ব্লক লেভেল কন্টেইনার যেমন <div> এর মধ্যে থাকা ইমেজগুলির জন্য প্রযোজ্যঃ

<style>
  div {
    text-align: center;
  }
</style>

<div>
  <img src="your-image.jpg">
</div>

Margin: Auto

ইমেজ সেন্টার করার আরেকটি উপায় হল margin: auto প্রপার্টি (left-margin এবং right-margin এর জন্য)।

তবে শুধুমাত্র margin: auto ব্যবহার করলে কাজ হবে না। যদি আপনি margin: auto ব্যবহার করতে চান, তাহলে এর সাথে আরও দুটি প্রপার্টি ব্যবহার করতে হবে।

ইনলাইন-লেভেল এলিমেন্টসমূহের উপরে margin: auto প্রপার্টির কোন প্রভাব পড়ে না। যেহেতু <img> ট্যাগ একটি ইনলাইন এলিমেন্ট, প্রথমে আমাদের এটিকে ব্লক-লেভেল এলিমেন্টে রূপান্তর করে নিতে হবেঃ

img {
  margin: auto;
  display: block;
}

দ্বিতীয়ত, ইমেজটির একটি প্রস্থ বা width সেট করতে হবে যেন বাম এবং ডান পাশের মার্জিন বাকি ফাঁকা যায়গাটুকু নিয়ে নিতে পারে। যার ফলে ইমেজটি মাঝখানে চলে আসবে (যদি আমরা ইমেজের প্রস্থ বা width হিসেবে 100% সেট না করি)ঃ

img {
  width: 60%;
  margin: auto;
  display: block;
}

Display: Flex

একটি ইমেজকে হরাইযন্টালি সেন্টার করার তৃতীয় পদ্ধতিটি হল display: flex। ঠিক যেভাবে আমরা একটি কন্টেইনারের জন্য text-align ব্যবহার করেছিলাম, একই রকম ভাবে আমরা display: flex ব্যবহার করব।

তবে শুধু display: flex ব্যবহার করলেই কাজ হবে না। এর পাশাপাশি কন্টেইনারটির justify-content প্রপার্টিও থাকতে হবেঃ

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

img {
  width: 60%;
}

justify-content প্রপার্টিটি display-flex এর সাথে একত্রে কাজ করে ইমেজকে হরাইযন্টালি সেন্টার করে।

এখানে ইমেজের প্রস্থ বা width অবশ্যই কন্টেইনারের প্রস্থের থেকে কম হতে হবে। ইমেজটি যদি কন্টেইনারের 100% যায়গা নিয়ে নেয় তাহলে আমরা সেটিকে সেন্টার করতে পারবো না।

উল্লেখ্যঃ পুরনো ব্রাউজারগুলি display-flex প্রপার্টিটি সমর্থন করে না। বিস্তারিত জানতে এখানে দেখুন।

একটি ইমেজকে ভার্টিক্যালি সেন্টার করা

Display: Flex

ভার্টিক্যাল অ্যালাইনমেন্টের জন্য display: flex এর ব্যবহার খুবই কার্যকরী।

ধরে নিন আমাদের কন্টেইনারের দৈর্ঘ্য বা height 800px কিন্তু আমাদের ইমেজের দৈর্ঘ্য বা height 500pxঃ

div {
  display: flex;
  justify-content: center;
  height: 800px;
}

img {
  width: 60%;
  height: 500px;
}

এক্ষেত্রে, শুধুমাত্র এক লাইন কোড, align-items: center যুক্ত করেই ইমেজটিকে সেন্টার করা যাবেঃ

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

display: flex এর সাথে একত্রে ব্যবহার করলে align-items প্রপার্টিটি যে কোন এলিমেন্টকে ভার্টিক্যালি সেন্টার করতে পারে।

Position: Absolute & Transform Properties

ভার্টিক্যাল অ্যালাইনমেন্টের আরেকটি পদ্ধতি হল position এবং transform প্রপার্টিগুলির ব্যবহার। এই পদ্ধতিটি একটু জটিল, তাই চলুন ধাপে ধাপে কাজটি করা যাক।

Step 1: Define Position Absolute

প্রথমে আমরা ইমেজটির পজিশনিং বিহেভিয়র static থেকে absolute করে ফেলতে হবেঃ

div {
  height: 800px;
  position: relative;
  background: red;
}

img {
  width: 80%;
  position: absolute;
}

এই ইমেজটি একটি relatively positioned কন্টেইনারে থাকতে হবে, তাই আমরা কন্টেইনার <div>position: relative প্রপার্টি যুক্ত করেছি।

Step 2: Define Top & Left Properties

দ্বিতীয়ত, আমরা ইমেজির top এবং left প্রপার্টিগুলির মান হিসেবে 50% সেট করবো। এর ফলে ইমেজের স্টার্টিং পয়েন্ট (top-left) কন্টেইনারের সেন্টারে চলে আসেঃ

img {
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
}

Step 3: Define the Transform Property

দ্বিতীয় ধাপের ফলে ইমেজটি আংশিকভাবে কন্টেইনারের বাহিরে চলে গেছে। সুতরাং ইমেজটিকে কন্টেইনারে ফিরিয়ে আনতে হবে।

ইমেজটির transform প্রপার্টির X এবং Y অ্যাক্সিসের মান হিসেবে -50% দিলে কাজ হয়ে যাবেঃ

img {
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

যে কোন এলিমেন্টকে হরাইযন্টালি এবং ভার্টিক্যালি সেন্টার করার আরও উপায় আছে তবে আমি সবথেকে কমন উপায়গুলি দেখিয়েছি। আমি আশা করি এই পোস্ট থেকে আপনি জানতে পেরেছেন কিভাবে একটি ইমেজকে পেজের সেন্টারে অ্যালাইন করতে হয়।

আপনি যদি ওয়েব ডেভেলপমেন্ট নিয়ে আরও জানতে চান, তাহলে আমার ইউটিউব চ্যানেল ঘুরে দেখতে পারেন।

পড়ার জন্য ধন্যবাদ!