¿Cómo puedo alinear el texto directamente debajo de una imagen?

Question

Solía ​​saber cómo poner una imagen en la parte superior y luego justificar el texto debajo de la imagen para que permanezca dentro de los límites del ancho de la imagen. Sin embargo, ahora no tengo idea de cómo hacer esto. ¿Cómo se logra esto?

Answer 1

Esto centra el "A" debajo de la imagen:

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

Eso es ASP.Net y sería hacer que el HTML como:

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

Answer 2

Su HTML:

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

Si conoce el ancho de su imagen, su CSS:

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

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

De lo contrario, su texto debajo de la imagen fluirá libremente. Para evitar esto, simplemente configure un ancho para su contenedor.

Answer 3

Para poder justificar el texto, necesita saber el ancho de la imagen. Puede usar el ancho normal de la imagen, o usar un ancho diferente, pero IE 6 puede ponerse irritable y no escalar.

Esto es lo que necesita:

<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

Puede utilizar HTML5 <figcaption>:

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

Working example.