多個圖像下的文本對齊

Question

我有四個圖像水平放置在彼此的旁邊。我正在嘗試在每個圖片下方放置文字。這就是我現在所擁有的。

HTML

<div class="team"> 
<h3>Our Team</h3> 
<img src="image.jpg" width="200px" height="200px" hspace="20" /> <h3>John Doe</h3> 
<p>Text</p> 
<p>Text</p> 
<img src="image.jpg" width="200px" height="200px" hspace="20" /> <h3>John Doe</h3> 
<p>Text</p> 
<p>Text</p> 
<img src="image.jpg" width="200px" height="200px" hspace="20" /> <h3>John Doe</h3> 
<p>Text</p> 
<p>Text</p> 
<img src="image.jpg" width="200px" height="200px" hspace="20" /> <h3>John Doe</h3> 
<p>Text</p> 
<p>Text</p> 
</div> 

CSS

.team { 顯示：塊; float：bottom; padding：10px; margin：15px; }

Answer 1

你將不得不將每一個包裝在div標籤中，它的樣式爲「display：inline-block;」 - 像這樣：

<div style="display:inline-block;"> 
    <img src="image.jpg" width="200px" height="200px" hspace="20" /> 
    <br><h3>John Doe</h3> 
    <br><p>Text</p> 
    <br><p>Text</p> 
</div>   
<div style="display:inline-block;"> 
    <img src="image.jpg" width="200px" height="200px" hspace="20" /> 
    <br><h3>John Doe</h3> 
    <br><p>Text</p> 
    <br><p>Text</p> 
</div> 

Answer 2

浮：bottom？

如果你想居中，你需要4個單獨的div浮動左右彼此，包含在父div中。簡單。

<div class="left">img,p</div> 

CSS

.left { 
    Float: left; 
    //add padding and margins 
} 

這就是你所需要的。無法爲你寫出全部內容，這讓iPad很累。

Answer 3

據我所知，你想要它：http://jsbin.com/welcome/8969