sous - positionner une image à coté du texte html




Comment puis-je aligner le texte directement sous une image? (3)

Afin de 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 pourrait devenir grincheux à vous et non à l'échelle.

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>

J'avais l'habitude de savoir comment mettre une image sur le dessus et ensuite justifier le texte 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 cela est-il accompli?


Cela centre le "A" ci-dessous 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 il rendrait le HTML comme:

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

Vous pouvez utiliser HTML5 <figcaption> :

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

Exemple de travail





justify