Menu
How can I make image caption width same as image? Now I have the following code:
<div class="image"> <img src="foo.jpg" alt="" /> <div>This is the caption.</div> </div> I've tried a lot of things (floating, absolute positioning etc), but if the caption is long, it always makes the div wide instead of going on many lines. The problem is that I don't know the width of image (or the length of caption). Is the only way to solve this use tables?
925
Entire trick is to use float: left; CSS property on the img element and all the text will automatically wrap around that image. So if you want to align text and image in the same line in HTML like this... In short that is it.
If all your figures have the same width, you can set the option \captionsetup{width=<len>} globally.
Centering. As described above, the caption text can be centered relative to the image by setting a width the text and using align="center" (HTML) or text-align: center (CSS) for it.
The <figcaption> tag in HTML5 allows you to enter text to your image for example: <figcaption> Your text here </figcaption>. You can then use CSS to position the text where it should be on the image.
So the problem is that you don't know how wide the img will be, and the caption for the img may exceed the width of the img, in which case you want to restrict the width of the caption to the width of the img.
In my case, I applied display:table on the parent element, and applied display:table-caption and caption-side:bottom on the caption element like this:
<div class="image" style="display:table;"> <img src="foo.jpg" alt="" /> <div style="display:table-caption;caption-side:bottom;">This is the caption.</div> </div> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
