Aligning A Caption To An Image

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 capti

Solution 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><imgsrc="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>

Solution 2:

Please try this:

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

img{
  height: 300px
}