CSS से इमेज का वर्टिकल अलाइनमेंट

vertical-align प्रॉपर्टी का उपयोग

किसी इमेज को टेक्स्ट के सापेक्ष वर्टिकली अलाइन करने के लिए vertical-align प्रॉपर्टी का उपयोग किया जाता है। यह प्रॉपर्टी इंलाइन या टेबल-सेल एलिमेंट्स पर काम करती है।

सामान्य मान

• baseline (डिफ़ॉल्ट) - पैरेंट के बेसलाइन के साथ अलाइन
• top - लाइन के टॉप के साथ अलाइन
• middle - पैरेंट के मिडल के साथ अलाइन
• bottom - लाइन के बॉटम के साथ अलाइन
• text-top - पैरेंट के फॉन्ट के टॉप के साथ अलाइन
• text-bottom - पैरेंट के फॉन्ट के बॉटम के साथ अलाइन
• sub - सबस्क्रिप्ट स्थिति
• super - सुपरस्क्रिप्ट स्थिति
• <length> या <percentage> - कस्टम ऑफसेट

उदाहरण

<!DOCTYPE html>
<html>
  <head>
    <style>
      img {
        vertical-align: text-bottom;
      }
    </style>
  </head>
  <body>
    <p>This is <img src="https://www.tutorialspoint.com/videotutorials/assets/videos/courses/155/images/course_155_image.png" alt="Video Tutorial" width="200" height="150"> demo image.</p>
  </body>
</html>