如何對齊圖像下面字幕

我有9個圖片總共三個每一行，我已成功地添加一個標題爲我的形象之一，但未能對其他的人，因爲這樣做只是中心下面的一切，沒有將文本與每個圖像的行對齊。如何對齊圖像下面字幕

<figure> 
<center> 
<img src='images/album1.jpg' alt='missing' /> 
<figcaption>Album name goes here 
<br>Year goes here 
<br>artist name goes here</figcaption> 

<img src='images/album2.jpg' alt='missing' /> 
<figcaption>Album name goes here 
<br>Year goes here 
<br>artist name goes here</figcaption> 

<img src='images/album2.jpg' alt='missing' /> 
<figcaption>Album name goes here 
<br>Year goes here 
<br>artist name goes here</figcaption> 
</figure><center>

等等。

來源

2013-10-02 Brian Lam

大約是15年前棄用。 – j08691

我會成立的代碼是這樣的：

<figure> 
    <img src='http://placehold.it/200x200' alt='missing' /> 
    <figcaption>Album name goes here 
     <br>Year goes here 
     <br>artist name goes here</figcaption> 
</figure>

，並應用以下CSS：

figure { 
    display: inline-block; 
    border: 1px dotted gray; 
    margin: 20px; /* adjust as needed */ 
} 
figure img { 
    vertical-align: top; 
} 
figure figcaption { 
    border: 1px dotted blue; 
    text-align: center; 
}

因爲每個figure是inline-block的，你基本上可以每行重複單元三次，在每三個單元之後添加一個<br>，或者將三個單元包裝在一個塊單元中，或者使用CSS3 nth-of-type(3n)選擇器添加換行符或類似行。

上figcaption使用text-align: center對準測試中心。 http://jsfiddle.net/audetwebdesign/4njG8/

結果是這樣的（一個足夠寬屏幕）：在

觀看演示

enter image description here

來源

2013-10-02 14:13:16

棄用這是真的深入馬克。我現在就給它一個鏡頭，謝謝你的問候！ –

我想加入'圖面垂直對齊，以補充一點，如果你的身材字幕有不平等的高度，你仍然可以對齊圖像：頂部; ''。 –

如果你有很長的文字（在「專輯名稱在這兒... ...」），則該伸出圖像容器不幸因此需要一些硬編碼 –

每個圖應該只包含一個圖像和一個figcaption。

<figure> 
    <img> 
    <figcaption> 
    </figcaption> 
</figure>

順便說一句...'center'元素不再存在。

Codepen Example

來源

2013-10-02 14:05:39

你在** figvaption **標記後忘了。 –

我明白了，我會再試一次，看看能否解決它。 –

另外，什麼意思關於

不再存在？有沒有更好的方法來實現它或？ –

如何對齊圖像下面字幕

回答

相關問題