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>