51

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?

Jason Berkan
  • 8,734
  • 7
  • 29
  • 39

5 Answers5

68

Your HTML:

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

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.

Jason
  • 51,583
  • 38
  • 133
  • 185
  • 2
    If you want to be sure the text is centered, you can change the css to: .img-with-text { text-align: center; } – Joey Baker Aug 04 '09 at 00:38
  • If you would float the `div` itself to the left or right you do not need to set the width and the content is still centered. Html/css should center automatically according to the biggest component and not to the full-width. – djmj Aug 26 '13 at 01:28
  • 1
    and to get the image width, a couple of approaches: http://stackoverflow.com/a/5633302/227926 and http://stackoverflow.com/a/623174/227926 In turn these need the image source path, how to get that, here: http://stackoverflow.com/a/2765186/227926 – therobyouknow Feb 05 '14 at 11:47
  • how do you position the image using this format? when i set `position:absolute` so that I can put the image where I want to, the text just hides behind the image. – Nick Jul 13 '16 at 21:07
  • 1
    this is because you're pulling the image out of the document flow by setting `position:absolute`, meaning the text has no concept of the image. you're better off positioning the image using margins or padding or even `position:relative` – Jason Jul 14 '16 at 16:00
66

You can use HTML5 <figcaption>:

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

Working example.

Majid
  • 13,853
  • 15
  • 77
  • 113
  • I think that I misunderstood the original question, I was expecting the text to be centered underneath. But I see this can easily be achieved by adding CSS to text-align center on the figure. Many thanks! – NibblyPig May 23 '19 at 14:16
5

This centers the "A" below the image:

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

That is ASP.Net and it would render the HTML as:

<div style="text-align:center">
<img id="Image1" src="Images/opentoselect.gif" style="border-width:0px;" />
<br />
A
</div>
JBrooks
  • 9,901
  • 2
  • 28
  • 32
  • 1
    -1 of course it didn't work, it uses asp, the server side language. The question wasn't tagged asp, we want a plain html solution. :D – Gordon Gustafson Aug 04 '09 at 00:16
  • 1
    @CrazyJugglerDrummer right below the ASP.Net is the HTML that it creates - that was my point. – JBrooks May 07 '13 at 00:56
5

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:

<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>
Gordon Gustafson
  • 40,133
  • 25
  • 115
  • 157
1

I am not an expert in HTML but here is what worked for me: 

<div class="img-with-text-below">
    <img src="your-image.jpg" alt="alt-text" />
    <p><center>Your text</center></p>
</div>