如何将图像彼此对齐，以使它们沿页面宽度均匀分布？ [关闭]

Question

我需要做以下事情：

1. 将四个大小相等的 (128x128) 图标彼此对齐。
2. 我需要根据页面宽度均匀分布这些图标。
3. 我需要将这些图标放在页面的中心。
4. 这些图标必须有与之关联的标题，当然也必须均匀地集中在页面上。

我是这样开始工作的：

<table>
<tr>
<td>INSERT_IMAGE1_URL_HERE</td>
<td>INSERT_IMAGE2_URL_HERE </td>
<td>INSERT_IMAGE3_URL_HERE </td>
<td>INSERT_IMAGE4_URL_HERE </td>
</tr>
<tr>
<td>INSERT_IMAGE1_CAPTION_HERE </td>
<td>INSERT_IMAGE2_CAPTION_HERE </td>
<td>INSERT_IMAGE3_CAPTION_HERE </td>
<td>INSERT_IMAGE4_CAPTION_HERE </td>
</tr>
<tr>
</table>

但我离得到上述结果还差得很远。中心标签没有多大帮助，而且字幕也乱七八糟。

有什么建议吗？

Answer 1

类似这样的：

HTML

<div class="container">

    <figure>
      <img src="http://placehold.it/128x128">
      <figcaption>Caption 1</figcaption>
    </figure>

    <figure>
      <img src="http://placehold.it/128x128">
      <figcaption>Caption 2</figcaption>
    </figure>

    <figure>
      <img src="http://placehold.it/128x128">
      <figcaption>Caption 3</figcaption>
    </figure>

    <figure>
      <img src="http://placehold.it/128x128">
      <figcaption>Caption 4</figcaption>
    </figure>

</div><!-- /.container -->

CSS

body {margin:0;}
.container {}
figure { margin:0; width:25%; float:left; text-align: center; }

JSFiddle Demo