Centering and aligning width of figcaption tag on image in figure tag

Question

I've spent two days now attempting to resolve a fig/figcation issue to no avail.

I have a Django application where users are able to submit images and I'm using the figure and figcaption tags to display the image with an accompanying caption. The main issue is that the caption width exceeds the picture width.

I'm trying to figure out a way for the image to remain the same size and the caption to line up in width accordingly. I'm using Twitter-Bootstrap as well. I'm open to all solutions. Any input, experience or advice greatly appreciated.

UPDATED: This is the actual HTML template code and CSS:

        <div class="span4 offset2">
                {% if story.pic %}
                    <h2>Image</h2> 
                    <figure width="{{story.pic.width_field}}">
                    <img class="image"src="{{ story.pic.url }}" width="{{story.pic.width_field}}" alt="some_image_alt_text"/>
                    {% if story.caption %}
                        <figcaption>
                                                {{story.caption}}
                        </figcaption>
                    {% endif %}
                    </figure>
                {% endif %}
        </div>


 image {height:auto;}

 figure {margin:0; display:table;} 

figcaption {display:table-row;
max-width: 30%;
font-weight: bold;}

Are you setting the `img` to a percentage `width`? Or are you leaving it without any `width` setting? I'm guessing you have the `img` set to `width: 100%`. — ScottS, Jul 12 '12 at 21:31

ScottS · Accepted Answer · 2012-07-13T16:56:39.917

10

Original Solution

figure .image {
    width: 100%;
}

figure {
    text-align: center;
    display: table;
    max-width: 30%; /* demo; set some amount (px or %) if you can */
    margin: 10px auto; /* not needed unless you want centered */
}

The key is to set some kind of max-width for the img on the figure element if you can, then it will keep both it and the text constrained.

See an example fiddle.

If You are Programmatically Reading the Width

First, this <figure width="{{story.pic.width_field}}"> should be this <figure style="width: {{story.pic.width_field}};">.

Second, do only this css (nothing else needed for img or figcaption; see fiddle):

figure {
    text-align: center;
    margin: 10px auto; /* not needed unless you want centered */
}

Really small images with long text are still going to have issues, as this fiddle shows. To make it at least look clean, you might check for some minimum size of the img and if it too small (say, 100px), then instead of setting width on the figure set min-width to the img size and set a max-width to your threshold of 100px like this fiddle shows.

edited Jul 13 '12 at 16:56

answered Jul 12 '12 at 21:49

ScottS

71,703
13
126
146

Okay. I added your settings with a max-width of 50%, just to see. The images size to the width of the div, which kinda works. The text does finally wrap. But smaller images expand well beyond their original size (this has to do with the figure .image CSS, I think. Any way to keep the actual proportions in line? I'm not sure exactly what the percentage difference of max-width accomplishes. Good answer, otherwise. – Why Not Jul 13 '12 at 07:37
Also, the figure. image at 100 percent prevents new uploaded images from appearing. So strange. Removing it displays these again. – Why Not Jul 13 '12 at 08:09
@WhyNot--You do not have to use a percentage `max-width`. You could set a pixel amount. Not sure of your situation, but ideally, if [you could problematically get the image width](http://stackoverflow.com/questions/5522611/accessing-image-dimensions-on-an-imagefield-in-a-django-template) then you could directly set a `width` on the `figure` inline with the `style` attribute, and drop the `100%` image width and the `max-width` from the css. A `width` or a `max-width` on the `figure` accomplishes keeping the `figcaption` the same size or smaller than the `img`, which is what you desire. – ScottS Jul 13 '12 at 09:17
I updated the code above with your suggestions. The caption still doesn't wrap around pictures smaller than the width of the div properly. So frustrating. Been about 9 hours now. – Why Not Jul 13 '12 at 16:33
@WhyNot--I'm not sure what you mean in that "pictures smaller than the width of the div" should not occur because you are setting the width on both to the same. However, it might be the `display: table` you are setting, which will no longer be needed with this method. See my update to my answer. – ScottS Jul 13 '12 at 16:53

score 5 · Answer 2 · answered Aug 06 '14 at 10:35

The solution for this problem is to play with TABLE and TABLECAPTION. It's just 2 lines of code.

You can see a live preview of this solution on the website: http://www.sandrasen.de/projektgebiete/kienheide/

figure { 
  display: table; 
}

figcaption { 
  display: table-caption; /* aligns size to the table of the figure
  caption-side: bottom /* makes the caption appear underneath the image/figure */
}

score 0 · Answer 3 · answered Sep 30 '18 at 02:23

In HTML5, things are quite straightforward:

HTML

<figure>
    <img src="..." >
    <figcaption>Caption 1</figcaption>
</figure>
<figure>
    <img src="..." >
    <figcaption>Caption 2</figcaption>
</figure>

CSS

figure{
  display: inline-block;
}

/* optional, use as required */
figcaption { 
  max-width: 30%;
  caption-side: bottom;
}

Centering and aligning width of figcaption tag on image in figure tag

3 Answers3

Original Solution

If You are Programmatically Reading the Width

Linked