CSS से इमेज को सेंटर (केंद्र) में संरेखित करें

CSS में इमेज को हॉरिजॉन्टली सेंटर (केंद्र) में संरेखित करने के लिए display: block के साथ margin-left: auto और margin-right: auto का उपयोग किया जाता है। यह ब्लॉक-लेवल एलिमेंट को उसके कंटेनर में केंद्रित करता है।

उदाहरण

नीचे दिए गए उदाहरण में, इमेज को display: block और ऑटो मार्जिन के साथ सेंटर किया गया है।

<!DOCTYPE html>
<html>
<head>
  <style>
    img {
      border: 2px solid orange;
      border-radius: 3px;
      padding: 7px;
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 50%;
    }
  </style>
</head>
</head>
<body>
  <img src="https://www.tutorialspoint.com/videotutorials/images/coding_ground_home.jpg" alt="Online Compiler" width="300" height="300">
</body>
</html>

मुख्य बिंदु:

• display: block - इमेज को ब्लॉक एलिमेंट बनाता है (डिफ़ॉल्ट इंलाइन होता है)
• margin-left: auto; margin-right: auto - उपलब्ध जगह को दोनों तरफ समान बांटता है
• width निर्दिष्ट करना आवश्यक है (100% के अलावा)

वैकल्पिक विधि: फ्लेक्सबॉक्स का उपयोग: पैरेंट पर display: flex; justify-content: center।