Figcaption不比图像宽

我有一个问题,figcaption它比它宽img,因此伸出它的右边.我硬编码了width标题并且它可以工作,但仅适用于相同宽度的图像.

HTML

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

你可以用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;
}