কম্পিউটার টিউটোরিয়াল

CSS দিয়ে ইমেজ সেন্টার করা


উদাহরণ

নিচের কোডটি CSS ব্যবহার করে একটি ইমেজ সেন্টার করার উদাহরণ:

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> img { display: block; margin-left: auto; margin-right: auto; width: 50%; } </style> </head> <body> <h1 style="text-align: center;">Example of centering an image</h1> <img src="https://images.pexels.com/photos/34950/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"> </body> </html>

আউটপুট

উপরের কোডটি নিচের আউটপুটটি তৈরি করবে:

CSS দিয়ে ইমেজ সেন্টার করা

  1. CSS দিয়ে স্টিকি ইমেজ তৈরি

  2. CSS দিয়ে ইমেজে বর্ডার যোগ করা

  3. CSS দিয়ে ইমেজে বাটন যোগ করা

  4. CSS দিয়ে ওয়েবসাইট হোরিজন্টালি সেন্টার (Center) করা