una - justificar texto html

¿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 justifico 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 la "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 representaría el HTML como:

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

Answer 2

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 necesitas:

<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 3

Puede usar HTML5 <figcaption> :

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

Ejemplo de trabajo

Answer 4

Tu 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.