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

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