在图像下添加文字（左，中，右）

Question

我有问题。我想提出几点照片（左，中，右）与它下面的文字......这就是我想要做的

[image]  [image]  [image] 
[text]  [text]  [text] 

这里是我当前的代码：

<img src=""> 
<p>Some Text</p> 
<img src="" style="margin-left:150px;"> 
<p>Some Text</p> 
<img src="" style="margin-left:300px;"> 
<p>Some text</p> 

Answer 1

您可以使用HTML标签figure和figcaption为了这个目的，然后漂浮的数字向左得到的效果你想实现。

HTML

<figure> 
    <img src="deadlink.jpg" alt="noimg" /> 
    <figcaption>Caption goes here</figcaption> 
</figure> 

<figure> 
    <img src="deadlink.jpg" alt="noimg" /> 
    <figcaption>Caption goes here</figcaption> 
</figure> 

<figure> 
    <img src="deadlink.jpg" alt="noimg" /> 
    <figcaption>Caption goes here</figcaption> 
</figure> 

CSS

figure { 
    position: relative; 
    float: left; 
} 

工作例如：

http://codepen.io/anon/pen/BLGaQp

Answer 2

像这样做：

<img src="" align="bottom" 
    height="xxx" width="xxx" /> 
<img src="" align="bottom" 
    height="xxx" width="xxx" /> 
<img src="" align="bottom" 
    height="xxx" width="xxx" /> 

应该工作...

或者你不喜欢这样写道：

HTML：

<div id="blabla"> 
<img src="" style="width:50%;"><br> 
<p>Text</p> 
</div> 

CSS：

#blabla { 
width:50%; 
height:auto; 
min-height:50px; 
}