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?
5 Answers
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.
-
2If you want to be sure the text is centered, you can change the css to: .img-with-text { text-align: center; } Aug 4, 2009 at 0: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.– djmjAug 26, 2013 at 1:28 -
1and to get the image width, a couple of approaches: stackoverflow.com/a/5633302/227926 and stackoverflow.com/a/623174/227926 In turn these need the image source path, how to get that, here: stackoverflow.com/a/2765186/227926 Feb 5, 2014 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.– NickJul 13, 2016 at 21:07 -
1this 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 evenposition:relative
– JasonJul 14, 2016 at 16:00
You can use HTML5 <figcaption>
:
<figure>
<img src="img.jpg" alt="my img"/>
<figcaption> Your text </figcaption>
</figure>
-
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! May 23, 2019 at 14:16
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>
-
careful setting the width of an img... you'll end up stretching the image out... yikes– JasonAug 4, 2009 at 0:24
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>
-
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 Aug 4, 2009 at 0:16
-
1@CrazyJugglerDrummer right below the ASP.Net is the HTML that it creates - that was my point.– JBrooksMay 7, 2013 at 0:56
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>