Aligning a caption to an image

Question

JSFiddle

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.

Answer 1

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> 

Answer 2

Please try this:

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

img{
  height: 300px
}