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

Posted 2023-03-05

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

【英文标题】：How to align images besides each other such that they get evenly distributed along the width of the page? [closed]

【发布时间】：2014-03-09 13:14:43

【问题描述】：

我需要做以下事情：

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

我是这样开始工作的：

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

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

有什么建议吗？

【参考方案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

【讨论】：

谢谢你！我非常感谢。您在此处使用 html5 与 figure 和 figcaption。真的很酷的东西。谢谢