多个图像下的文本对齐

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