How can I align text directly beneath an image

Question

I used to know how to put an image on top and then justify the text below the image so that it stays within the borders of the width of the image   However  now I have no idea how to do this   How is this accomplished

User · Answer

You can use HTML5  lt figcaption gt     lt figure gt     lt img src  img jpg  alt  my img   gt     lt figcaption gt  Your text  lt  figcaption gt   lt  figure gt    Working example

User · Answer

This centers the  A  below the image    lt div style  text-align center  gt     lt asp Image ID  Image1  runat  server  ImageUrl    Images opentoselect gif    gt     lt br   gt    A  lt  div gt    That is ASP Net and it would render the HTML as    lt div style  text-align center  gt   lt img id  Image1  src  Images opentoselect gif  style  border-width 0px     gt   lt br   gt  A  lt  div gt

User · Answer

In order to be able to justify the text  you need to know the width of the image  You can just use the normal width of the image  or use a different width  but IE 6 might get cranky at you and not scale   Here s what you need    lt style type  text css  gt   container   width  100px    whatever width you want     image  width  100     fill up whole div     text   text-align  justify         lt  style gt     lt div id  container  gt         lt img src    id  image    gt         lt p id  text  gt oooh look  text  lt  p gt     lt  div gt

User · Answer

Your HTML    lt div class  img-with-text  gt       lt img src  yourimage jpg  alt  sometext    gt       lt p gt Some text lt  p gt   lt  div gt    If you know the width of your image  your CSS    img-with-text       text-align  justify      width   width of img       img-with-text img       display  block      margin  0 auto      Otherwise your text below the image will free-flow  To prevent this  just set a width to your container

User · Answer

I am not an expert in HTML but here is what worked for me     lt div class  img-with-text-below  gt       lt img src  your-image jpg  alt  alt-text    gt       lt p gt  lt center gt Your text lt  center gt  lt  p gt   lt  div gt

[html] How can I align text directly beneath an image?

Examples related to html

Examples related to css

Examples related to text

Examples related to justify