CODEWITHSUNDEEP
htmlcss
Vader
Vader

Reputation: 6716

Figcaption no wider than the image

I have a problem where the figcaption is wider than the img and hence sticking out to the right of it. I hardcoded the width of the caption and it works, but only for images of the same width.

enter image description here

HTML

<figure>
    <img src="http://i.imgur.com/tVeUqlH.jpg"/>
        <figcaption>Vader enjoying the beach.</figcaption>
</figure>

CSS 

figure {
    border: 1px solid black;
    display: inline-block;
    padding: 3px;
    margin: 10px;
}
figure img {
    vertical-align: top;
}
figcaption {
    text-align: center;
    border: 1px dotted blue;
    width: 120px;
}

jsFiddle

Upvotes: 5

Views: 4055

Answers (1)

ITChristian
ITChristian

Reputation: 11271

You can use display: table-caption;.

.imagecaption {
    padding: 3px;
    margin: 10px;
    float: left;
    border: 1px solid black;
}
figure {
    display: table;
    margin: 0px;

}

figure img {
    display: block;
}

figcaption {
    display: table-caption;
    caption-side: bottom;
    text-align: center;
    border: 1px dotted blue;
}
<div class="imagecaption">
  <figure>
    <img src="http://i.imgur.com/tVeUqlH.jpg"/>
    <figcaption>Vader enjoying the beach.</figcaption>
  </figure>
</div>

Upvotes: 15

Related Questions