Come posso allineare il testo direttamente sotto un'immagine?

Question

Ero solito sapere come inserire un'immagine sopra e quindi giustificare il testo sotto l'immagine in modo che rimanga entro i confini della larghezza dell'immagine. Tuttavia, ora non ho idea di come farlo. Come è stato realizzato?

Answer 1

Questa centra la "A" sotto l'immagine:

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

Questo è ASP.Net e sarebbe rendere l'HTML come:

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

Answer 2

tuo HTML:

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

Se conosci la larghezza della tua immagine, il tuo CSS:

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

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

In caso contrario, il testo sotto l'immagine scorrerà liberamente. Per evitare ciò, basta impostare una larghezza per il contenitore.

Answer 3

Per poter giustificare il testo, è necessario conoscere la larghezza dell'immagine. Puoi semplicemente usare la larghezza normale dell'immagine, o usare una larghezza diversa, ma IE 6 potrebbe diventare irritabile e non scalare.

Ecco quello che vi serve:

<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

È possibile utilizzare HTML5 <figcaption>:

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

Working example.