CSS দিয়ে ছবির সেন্টারে টেক্সট পজিশন করুন

ছবির সেন্টারে টেক্সট রাখতে position: absolute সাথে top: 50%; left: 50% এবং transform: translate(-50%, -50%) ব্যবহার করা হয়। এটি সবচেয়ে নির্ভুল পদ্ধতি।

উদাহরণ

নিচের কোডটি চালিয়ে ছবির সেন্টারে টেক্সট রাখার উদাহরণ দেখুন:

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      .container { 
        position: relative; 
      } 
      .topleft { 
        position: absolute; 
        left: 50%; 
        top: 50%; 
        transform: translate(-50%, -50%); 
        font-size: 18px; 
      } 
      img { 
        width: 100%; 
        height: auto; 
        opacity: 0.3; 
      } 
    </style> 
  </head> 
  <body> 
    <h2>Image Text</h2> 
    <p>Add some text to an image in the center of an image:</p> 
    <div class="container"> 
      <img src="trolltunga.jpg" alt="Norway" width="1000" height="300"> 
      <div class="topleft">Center</div> 
    </div> 
  </body> 
</html>

ব্যাখ্যা: top: 50%; left: 50% দিয়ে এলিমেন্টের উপরের-বাম কোণকে ছবির কেন্দ্রে আনলো। transform: translate(-50%, -50%) দিয়ে এলিমেন্টকে নিজের আকারের অর্ধেক বাম ও উপরে সরিয়ে পুরোপুরি কেন্দ্রে নিয়ে এসা হয়েছে। এটি রেসপন্সিভ এবং সব আকারের ছবিতে কাজ করে।