web-dev-qa-db-fra.com

Comment aligner du texte directement sous une image?

J'avais l'habitude de savoir comment mettre une image en haut, puis justifier le texte situé sous l'image afin qu'il reste dans les limites de la largeur de l'image. Cependant, maintenant je n'ai aucune idée de comment faire cela. Comment est-ce accompli?

htmlcsstextjustify
38
Andie

Votre HTML:

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

Si vous connaissez la largeur de votre image, votre CSS:

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

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

Sinon, votre texte au-dessous de l'image sera fluide. Pour éviter cela, définissez simplement une largeur pour votre conteneur.

55
Jason

Vous pouvez utiliser HTML5 <figcaption>:

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

Exemple de travail .

40
Majid

Pour pouvoir justifier le texte, vous devez connaître la largeur de l'image. Vous pouvez simplement utiliser la largeur normale de l'image, ou utiliser une largeur différente, mais IE 6 peut devenir grincheux et ne pas être redimensionné.

Voici ce dont vous avez besoin:

<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>
4
Gordon Gustafson

Cela centre le "A" sous l'image:

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

C'est ASP.Net et cela rendrait le code HTML comme suit:

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