एक छवि के तहत कैप्शन कैसे लिखें?

Question

मेरे पास दो छवियां हैं जिन्हें इनलाइन रखने की आवश्यकता है; मैं प्रत्येक चित्र के नीचे एक कैप्शन लिखना चाहता हूं।

<center>
   <a href="http://example.com/hello">
       <img src="hello.png" width="100px" height="100px">
   </a>
   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
   <a href="http://example.com/hi">
       <img src="hi.png" width="100px" height="100px">
   </a>
</center>

मैं कैसे लागू कर सकता हूं?

Comments

@ceejayoz &nbspएक मार्जिन सेट करने, या अन्य सीएसएस लेआउट टूल का उपयोग करने के लिए विरोध के रूप में सभी का उल्लेख नहीं करने के लिए ।

— jzworkman

जबकि यह अनिवार्य रूप से उत्तर दिया गया है, एक इनलाइन छवि की चौड़ाई फिट करने के लिए कैप्शन प्राप्त करने का एकमात्र तरीका एक आवरण या कैप्शन पर चौड़ाई की संपत्ति को हार्ड-कोड करना है।

— MyNameIsKo

@McGarnagle अन्य लोगों के पोस्ट में कोड अर्थ को संपादित नहीं करता है। गठन ठीक है (जब तक कि यह अजगर नहीं है) अच्छी तरह से, लेकिन सभी कोड सामग्री महत्वपूर्ण हैं! आपके संपादन के लिए धन्यवाद, jxworkmans पोस्ट निरर्थक दिखी। और वास्तव में, प्रश्न में गलत कोड तय करना पूरी बकवास है। तब उत्तर की बात क्या होगी?

— टॉम ज़ातो -

Answer 1

चित्रा और अंजीर टैग:

<figure>
    <img src='image.jpg' alt='missing' />
    <figcaption>Caption goes here</figcaption>
</figure>

होगा HTML5 प्यार करता हूँ।

---

नमूना देखें

#container {
    text-align: center;
}
a, figure {
    display: inline-block;
}
figcaption {
    margin: 10px 0 0 0;
    font-variant: small-caps;
    font-family: Arial;
    font-weight: bold;
    color: #bb3333;
}
figure {
    padding: 5px;
}
img:hover {
    transform: scale(1.1);
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
}
img {
    transition: transform 0.2s;
    -webkit-transition: -webkit-transform 0.2s;
    -moz-transition: -moz-transform 0.2s;
    -o-transition: -o-transform 0.2s;
}

<div id="container">
    <a href="#">
        <figure>
            <img src="http://lorempixel.com/100/100/nature/1/" width="100px" height="100px" />
            <figcaption>First image</figcaption>
        </figure>
    </a>
    <a href="#">
        <figure>
             <img src="http://lorempixel.com/100/100/nature/2/" width="100px" height="100px" />
            <figcaption>Second image</figcaption>
        </figure>
    </a>
</div>

Comments

आपको IE के अधिकांश के लिए HTML5 शिम की आवश्यकता होगी, हालाँकि।

— सइयोजोज

वे टैग किसी भी तरह से मदद नहीं करते हैं। वे सिर्फ डमी मार्कअप हैं, और आपको CSS (और / या अन्य HTML टैग्स) में सभी काम करने की आवश्यकता है। और आपको डमी टैग के रूप में भी पहचानने के लिए IE के पुराने संस्करणों को बनाने के लिए एक अतिरिक्त ऑपरेशन की आवश्यकता है। तो यह उपयोग करने के लिए सरल है divया span।

— जुक्का के। कोर्पेला

@ JukkaK.Korpela ये टैग बहुत महत्वपूर्ण हैं। stackoverflow.com/a/17272444/756329 और html5doctor.com/lets-talk-about-semantics

— जोसेफ हेन्सन

समस्या यह है [figures] can be moved to another page or to an appendix without affecting the main flow:। <figure>और <figcaption>कैप्शन के साथ छवियों के लिए सामान्य-उद्देश्य प्रतिस्थापन नहीं हैं। वे केवल आंकड़ों पर लागू होते हैं। यदि आपके पास (उदाहरण के लिए) एक चरण-दर-चरण है कि कैप्शन वाली तस्वीरों के साथ जुड़े पैराग्राफ से बना है, तो यह महत्वपूर्ण हो सकता है कि छवियों को उसी पैरा ब्रेक्स में प्रस्तुत किया जाए जो html में परिभाषित है। इसलिए <figure>यहां लागू नहीं होगा (जैसा कि मैं समझता हूं)।

— पोंकडूडल

मुझे लगता है कि इन लाइनों को जरूरी नहीं है कि एक छवि के तहत एक आंकड़ा कैप्शन रखें। यहां दिया गया HTML सामग्री का वर्णन करता है, लेकिन उपस्थिति सीएसएस द्वारा प्रभावित / निर्धारित होती है।

— jvriesem

Answer 2

सीएसएस

#images{
    text-align:center;
    margin:50px auto; 
}
#images a{
    margin:0px 20px;
    display:inline-block;
    text-decoration:none;
    color:black;
 }

एचटीएमएल

<div id="images">
    <a href="http://xyz.com/hello">
        <img src="hello.png" width="100px" height="100px">
        <div class="caption">Caption 1</div>
    </a>
    <a href="http://xyz.com/hi">
        <img src="hi.png" width="100px" height="100px"> 
        <div class="caption">Caption 2</div>
    </a>
</div>​

एक बेला यहाँ है।

Answer 3

<div style="margin: 0 auto; text-align: center; overflow: hidden;">
  <div style="float: left;">
    <a href="http://xyz.com/hello"><img src="hello.png" width="100px" height="100px"></a>
    caption 1
  </div>
 <div style="float: left;">
   <a href="http://xyz.com/hi"><img src="hi.png" width="100px" height="100px"></a>
   caption 2                      
 </div>
</div>

Answer 4

छवि डालें - मान लें कि यह चौड़ाई 140px है - एक लिंक के अंदर:

<a><img src='image link' style='width: 140px'></a>

अगला, कैप्शन को एक में रखें और इसे केंद्रित करते हुए इसे अपनी छवि से कम चौड़ाई दें:

<a>
  <img src='image link' style='width: 140px'>
  <div style='width: 130px; text-align: center;'>I just love to visit this most beautiful place in all the world.</div>
</a>

इसके बाद, लिंक टैग में, लिंक को स्टाइल करें ताकि यह लिंक की तरह न दिखे। आप इसे अपनी इच्छानुसार कोई भी रंग दे सकते हैं, लेकिन अपने लिंक ले जाने वाली किसी भी टेक्स्ट सजावट को हटा सकते हैं।

<a style='text-decoration: none; color: orange;'>
  <img src='image link' style='width: 140px'>
  <div style='width: 130px; text-align: center;'>I just love to visit this most beautiful place in all the world.</div>
</a>

मैंने एक लिंक में कैप्शन के साथ छवि को लपेटा है ताकि कोई भी पाठ कैप्शन को बाहर न धकेल सके: कैप्शन लिंक द्वारा चित्र से बंधा हुआ है। यहाँ एक उदाहरण है: http : //www.alphaed गरीबी.com/p/okay.html

Comments

<div>इनलाइन टैग के अंदर जैसे ब्लॉक टैग की अनुमति नहीं है <a>- आपको <span>कैप्शन के लिए उपयोग करना चाहिए ।

— mindplay.dk

<Div> के साथ <span> प्रतिस्थापित करना पूरी तरह से @ TheAlpha के उदाहरण में विफल रहता है। लगता है कि आपको <div> की आवश्यकता है।

— पियरे

@ mindplay.dk मुझे लगता है कि क्योंकि aटैग का कंटेंट मॉडल पारदर्शी है इसलिए यह किसी भी बच्चे को स्वीकार कर सकता है जिसे पैरेंट टैग (इंटरेक्टिव कंटेंट को छोड़कर) कर सकते हैं। यदि मैं गलत हूं तो मुझे सही करों? मै सिखना चाहता हूॅ। w3.org/TR/html5/text-level-semantics.html#the-a-element

— Chris Bier

Answer 5

सीएसएस आपका दोस्त है; केंद्र टैग की कोई आवश्यकता नहीं है (यह उल्लेख नहीं है कि यह बहुत मूल्यह्रास है) और न ही अत्यधिक गैर-ब्रेकिंग रिक्त स्थान। ये रहा एक सरल उदाहरण:

सीएसएस

.images {
    text-align:center;
}
.images img {
    width:100px;
    height:100px;
}
.images div {
    width:100px;
    text-align:center;
}
.images div span {
    display:block;
}
.margin_right {
    margin-right:50px;
}
.float {
    float:left;
}
.clear {
    clear:both;
    height:0;
    width:0;
}

एचटीएमएल

<div class="images">
    <div class="float margin_right">
        <a href="http://xyz.com/hello"><img src="hello.png" width="100px" height="100px" /></a>
        <span>This is some text</span>
    </div>
    <div class="float">
        <a href="http://xyz.com/hi"><img src="hi.png" width="100px" height="100px" /></a>
        <span>And some more text</span>
    </div>
    <span class="clear"></span>
</div>

Answer 6

उत्तरदायी छवियों के लिए। आप चित्र टैग के भीतर चित्र और स्रोत टैग जोड़ सकते हैं।

<figure>
  <picture>
    <source media="(min-width: 750px)" srcset="images/image_2x.jpg"/>
    <source media="(min-width: 500px)" srcset="images/image.jpg" />
    <img src="images.jpg" alt="An image">
  </picture>
  <figcaption>Caption goes here</figcaption>
</figure>

Answer 7

अधिक शब्दार्थ रूप से सही होने के लिए और ओ पी ओर्गिनल प्रश्न का उत्तर देने के लिए उन्हें साइड से संरेखित करने के लिए मैं इसका उपयोग करूंगा:

एचटीएमएल

<div class="items">
<figure>
    <img src="hello.png" width="100px" height="100px">
    <figcaption>Caption 1</figcaption>
</figure>
<figure>
    <img src="hi.png" width="100px" height="100px"> 
    <figcaption>Caption 2</figcaption>
</figure></div>

सीएसएस

.items{
text-align:center;
margin:50px auto;}


.items figure{
margin:0px 20px;
display:inline-block;
text-decoration:none;
color:black;}

https://jsfiddle.net/c7borg/jLzc6h72/3/

Answer 8

<figcaption>एचटीएमएल 5 में टैग आप उदाहरण के लिए अपनी छवि के लिए पाठ दर्ज करने के लिए अनुमति देता है:

<figcaption>
Your text here
</figcaption>.

फिर आप सीएसएस का उपयोग पाठ को उस स्थान पर करने के लिए कर सकते हैं जहां यह छवि पर होना चाहिए।

Answer 9

<table>
<tr><td><img ...><td><img ...>
<tr><td>caption1<td>caption2
</table>

इच्छानुसार स्टाइल।

Comments

मैं ऐसा कभी नहीं करूंगा। व्यक्ति प्रस्तुति सलाह के लिए पूछ रहा है कि सारणीबद्ध प्रारूप में सामग्री कैसे प्रदर्शित करें।

— माइक कोर्मेंडी