html positionner Comment puis-je aligner le texte directement sous une image?




positionner une image à coté du texte html (4)

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?


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 sous l'image sera libre. Pour éviter cela, il suffit de définir une largeur pour votre conteneur.


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>

Vous pouvez utiliser HTML5 <figcaption> :

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

Exemple de travail


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>




justify