Aligning a caption to an image

Question

I have an image inside a figure. The image has the following style:

height: 300px;
max-width: 300px;
display: block;
margin: 0 auto;

The image must be centered.

The caption underneath the image must be left aligned to the bottom left corner of the image and be no wider than the image.

The image could be any size, so fixing the width and offset of the figcaption will not work.

The only thing I could think of is making the figure inline-block, but then the image is left aligned and I need it centered.

Can anyone come up with a solution.

G-Cyrillus · Accepted Answer · 2016-02-01T17:48:43.953

3

display:table + margin:auto as a basis, works fine too

figure {
  display:table;
  margin:auto;
  width:1%;/* will expand to the widest element image or long word */
}

img{
  max-width: 300px;/* if you need so */
/* no need to reset display to avoid browser's confusion */
}
figcaption{
 display:table-row;/* to stack under previous tag within table displayed container table-footer-group works too*/
}

<figure>
    <img src="http://portra.wpshower.com/wp-content/uploads/2014/03/martin-schoeller-clint-eastwood-portrait-up-close-and-personal.jpg">
    <figcaption>C. Eastwood C. Eastwood C. EastwoodC. EastwoodC. Eastwood C. EastwoodC. EastwoodC. EastwoodC. Eastwood</figcaption>
</figure>

edited Feb 01 '16 at 17:48

answered Feb 01 '16 at 17:42

G-Cyrillus

101,410
14
105
129

Thanks but this does not work with longer captions: https://jsfiddle.net/gpq205rq/ – panthro Feb 01 '16 at 17:45
@panthro oh yes, forgot about this : fix => https://jsfiddle.net/gpq205rq/1/ snippet updated – G-Cyrillus Feb 01 '16 at 17:48

score 1 · Answer 2 · answered Feb 01 '16 at 18:08

1

Please try this:

figure{
  margin: 0 auto;
  max-width: 300px;
}

img{
  height: 300px
}

answered Feb 01 '16 at 18:08

Waqas Gulraiz

11
2

Aligning a caption to an image

2 Answers2

Linked