圖像標題在居中圖像下左對齊

Question

我有一些帶有標題的圖像。 圖像以網站爲中心，標題應顯示在圖像下方。非常簡單到目前爲止，但這裏的問題： 字幕應左對齊，並開始在圖像的左下角（如在報紙）

我可以想到一個解決方案，但我不'喜歡它，因爲表在這裏顯示錶中的數據，而不是圖像和圖像標題

表解決方案：

<table class="centered-table"> 
    <tr><td class="image"><img src="stackoverflow.jpg" /></td></tr> 
    <tr><td class="caption">Unanswered question on stackoverflow.com</td></tr> 
</table> 

Answer 1

我會用<figure>和<figcaption>與display: table一點點得到你想要的效果。

看到這個Example

Answer 2

Hmmmmmmm

<style> 
    .centered {text-align:center;} 
    .wrapper {display:inline-block; text-align:left;} 
</style> 

和

<div class="centered"> 
    <div class="wrapper"> 
     <div class="image"><img src="someimage.jpg" /></div> 
     <div class="caption">Some caption text!</div> 
    </div> 
    <div class="wrapper"> 
     <div class="image"><img src="someimage.jpg" /></div> 
     <div class="caption">Some caption text!</div> 
    </div> 
</div> 

還是什麼？ :)

Answer 3

使用嵌套div標籤是另一種解決方案，通過此相關的問題所示： Correctly aligning image captions

Answer 4

嘗試是這樣的：

http://jsfiddle.net/tcF7M/1

Answer 5

附上你的照片和標題在一個div，並給它一個內聯塊顯示樣式。

<div id="article"> 
    <div class="title"><div> 
     <img src="picture.jpg" /> 
     <em>Caption for the picture.</em> 
    </div></div> 
    <p>rest of the articlce...</p> 
</div> 

With CSS。

div.title 
{ 
    text-align:center; 
} 
div.title > div 
{ 
    display:inline-block; 
    text-align:left; 
}