Figcaption不比图像宽

Question

我遇到一个问题，figcaption比img更宽，因此在它的右边突出。我对标题的width进行了硬编码，但它确实有效，但仅适用于相同宽度的图像。

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

Answer 1

您可以使用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>

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