इमेज के नीचे कैप्शन कैसे लिखें? - सीएसएस

इस पोस्ट में इमेज के नीचे कैप्शन लिखने के बारे में बताया गया है।

इमेज के नीचे कैप्शन कैसे लिखें?

एक इमेज के नीचे कैप्शन लिखने के लिए, हम नीचे बताए गए विभिन्न तरीके प्रदान करेंगे:

• विधि 1: HTML का उपयोग करके इमेज कैप्शन कैसे जोड़ें” <अंजीर कैप्शन> ' तत्व?
• विधि 2: 'का उपयोग करके इमेज कैप्शन कैसे जोड़ें' <दिव> ' तत्व?

विधि 1: HTML “

इमेज कैप्शन जोड़ने के लिए, निम्नलिखित निर्देशों का पालन करें:

• सबसे पहले, 'जोड़ें' <आंकड़ा> ” तत्व, जिसका उपयोग स्व-निहित सामग्री का प्रतिनिधित्व करने के लिए किया जाता है, संभावित रूप से एक वैकल्पिक कैप्शन के साथ।
• अगला, एक 'डालें 'पैराग्राफ के अंदर टैग करें'

  ' टैग। का उपयोग करके छवि जोड़ें ' स्रोत ' गुण। ' सब कुछ 'संपत्ति जोड़ी गई सामग्री को दिखाती है यदि छवि किसी कारण से प्रदर्शित नहीं हुई।

• छवि की चौड़ाई को 'के रूप में सेट करें' 200 पीएक्स ”।
• फिर ' <अंजीर कैप्शन> ” टैग का उपयोग छवि के लिए कैप्शन जोड़ने के लिए किया जाता है। इसके अलावा, “

आप देख सकते हैं कि निर्दिष्ट कैप्शन वाली छवि प्रदर्शित की गई है:

अब, CSS का उपयोग करके कैप्शन जोड़ने की दूसरी विधि की ओर बढ़ें।

विधि 2: “

” तत्व का उपयोग करके इमेज कैप्शन कैसे जोड़ें?

'का उपयोग करके छवि कैप्शन जोड़ने के लिए' <दिव> ” तत्व, दिए गए निर्देशों का प्रयास करें:

• बनाओ ' <दिव> 'कंटेनर और नाम के साथ एक वर्ग विशेषता जोड़ें' छवि धारक ”।
• हेडिंग टैग जोड़ें ' <एच2> ”शीर्षक डालने के लिए और अपनी पसंद के अनुसार शीर्षक को स्टाइल करें।
• एक और '
  ' तत्व जोड़ें और एक 'डालें' 'के साथ टैग करें' स्रोत ”, “ सब कुछ ' और ' चौड़ाई Div कंटेनर के बीच विशेषताएँ।
• एक तीसरा '
  ' वर्ग नाम के साथ जोड़ें ' img-कैप्शन ”। फिर, “

  ” टैग के बीच में कैप्शन दें। इसके अलावा, '
  ”तत्व का उपयोग एक पंक्ति विराम जोड़ने के लिए किया जाता है:

= 'रंग: आरजीबी (95, 31, 245)' > HTML इमेज >

>

= 'टीएसएल.पीएनजी' सब कुछ = 'टीएसएल सामग्री निर्माता' चौड़ाई = '200' >

<डिव वर्ग = 'आईएमजी-कैप्शन' > > टीएसएल सामग्री निर्माता >

>

>

यह देखा जा सकता है कि छवि के लिए कैप्शन सफलतापूर्वक जोड़ा गया है:

अब, गुणों को लागू करने के लिए CSS अनुभाग की ओर बढ़ते हैं।

CSS में स्टाइल “.इमेज-होल्डर”

सबसे पहले, 'पर पहुंचें' <दिव> 'तत्व एक वर्ग है' छवि धारक ”। फिर, निम्न CSS गुणों को लागू करें:

उपर्युक्त संपत्तियों का विवरण नीचे वर्णित है:

• ' स्थिति '' के रूप में सेट किया गया है संबंधी ” एक तत्व की मूल स्थिति को निर्दिष्ट करने के लिए जो दस्तावेज़ के प्रवाह में स्थिर मान की तरह रहता है।
• फिर, ' कद 'तत्व ऊंचाई को परिभाषित करने के लिए प्रयोग किया जाता है।
• ' चौड़ाई ” संपत्ति तत्व के आकार को चौड़ाई में निर्दिष्ट करती है।
• ' अंतर '' के रूप में सेट किया गया है ऑटो ”तत्व के चारों ओर स्वचालित रूप से स्थान सेट करने के लिए।

CSS में स्टाइल कैप्शन

इस चरण में, हम दो वर्गों को 'नाम से एक्सेस करेंगे' छवि धारक ' और ' img-कैप्शन ” और निम्नलिखित सीएसएस गुणों को लागू करें:

उपरोक्त गुणों का विवरण इस प्रकार है:

• ' पाठ संरेखित 'संपत्ति' के रूप में सेट है केंद्र ” बीच में पाठ की स्थिति को संरेखित करने के लिए।
• अगला, ' फ़ॉन्ट वजन 'के रूप में आवंटित किया गया है' निडर ”छवि कैप्शन फ़ॉन्ट सेट करने के लिए।
• फिर ' रंग ” संपत्ति का उपयोग एक्सेस किए गए तत्व के रंग को सेट करने के लिए किया जाता है।
• ' पार्श्वभूमि ” संपत्ति तत्व पृष्ठभूमि का रंग सेट करती है।
• सहित अन्य गुण, ' स्थिति ”, “ कद ', और ' चौड़ाई ” का उपयोग संबंधित कार्यात्मकताओं को लागू करने के लिए भी किया जाता है।

उत्पादन

हमने इमेज के नीचे कैप्शन लिखने की विधियों पर चर्चा की है।

निष्कर्ष

एक छवि के नीचे एक कैप्शन लिखने के लिए, उपयोगकर्ता या तो 'का उपयोग कर सकते हैं' <अंजीर कैप्शन> 'तत्व या एक साधारण' <दिव> 'कंटेनर। “