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 fi

Answer 1

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

should be this

.

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.