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 { 显示：块; 浮：底部; 填充：10px; 保证金：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

Float：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

文本对齐多个图像下方

3 个答案: