[Solved]-Centering and aligning width of figcaption tag on image in figure tag

by

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.

👤ScottS

5👍

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 */
}
👤alboth – undkonsorten.com

0👍

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;
}
👤lifebalance

Leave a comment