मैं छवि के नीचे सीधे पाठ को कैसे संरेखित कर सकता हूं?

Question

मुझे पता था कि छवि को शीर्ष पर कैसे रखा जाए और फिर छवि के नीचे दिए गए पाठ को उचित ठहराना ताकि यह छवि की चौड़ाई की सीमाओं के भीतर रहता है। हालांकि, अब मुझे नहीं पता कि यह कैसे करें। यह कैसे पूरा किया जाता है?

Answer 1

इस छवि के नीचे 'ए' केन्द्रों:

<div style="text-align:center"> 
    <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/opentoselect.gif" /> 
    <br /> 
    A 
</div> 

ASP.Net है और यह HTML के रूप में प्रस्तुत करना होगा:

<div style="text-align:center"> 
<img id="Image1" src="Images/opentoselect.gif" style="border-width:0px;" /> 
<br /> 
A 
</div> 

Answer 2

आपका HTML:

<div class="img-with-text"> 
    <img src="yourimage.jpg" alt="sometext" /> 
    <p>Some text</p> 
</div> 

यदि आप अपनी छवि की चौड़ाई जानते हैं, तो आपका सीएसएस:

.img-with-text { 
    text-align: justify; 
    width: [width of img]; 
} 

.img-with-text img { 
    display: block; 
    margin: 0 auto; 
} 

अन्यथा छवि के नीचे आपका टेक्स्ट फ्री-फ्लो होगा। इसे रोकने के लिए, बस अपने कंटेनर पर चौड़ाई निर्धारित करें।

Answer 3

टेक्स्ट को औचित्य देने में सक्षम होने के लिए, आपको छवि की चौड़ाई जानने की आवश्यकता है। आप छवि की सामान्य चौड़ाई का उपयोग कर सकते हैं, या एक अलग चौड़ाई का उपयोग कर सकते हैं, लेकिन आईई 6 आपके ऊपर क्रैकी हो सकता है और स्केल नहीं कर सकता है।

यहाँ आप क्या जरूरत है:

<figure> 
    <img src="img.jpg" alt="my img"/> 
    <figcaption> Your text </figcaption> 
</figure> 

Working example:

<style type="text/css"> 
#container { width: 100px; //whatever width you want } 

#image {width: 100%; //fill up whole div } 

#text { text-align: justify; }  
</style> 

<div id="container"> 
    <img src="" id="image" /> 
    <p id="text">oooh look! text!</p> 
</div> 

Answer 4

आप एचटीएमएल 5 <figcaption> उपयोग कर सकते हैं।