html - 在图像下添加文本(左、中、右)

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