多个图像下的文本对齐

问题描述：

我有四个图像水平放置在彼此的旁边。我正在尝试在每个图片下方放置文字。这就是我现在所拥有的。多个图像下的文本对齐

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; }

答

你将不得不将每一个包装在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>

非常感谢。这解决了问题 – 2012-08-06 20:43:53

答

浮：bottom？

如果你想居中，你需要4个单独的div浮动左右彼此，包含在父div中。简单。

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

CSS

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

这就是你所需要的。无法为你写出全部内容，这让iPad很累。

答

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

多个图像下的文本对齐

相关推荐