CODEWITHSUNDEEP
htmlcss
panthro
panthro

Reputation: 24061

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 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.

Upvotes: 2

Views: 123

Answers (2)

Waqas Gulraiz
Waqas Gulraiz

Reputation: 11

Please try this:

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

img{
  height: 300px
}

Upvotes: 1

G-Cyrillus
G-Cyrillus

Reputation: 105893

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>

Upvotes: 3

Related Questions