html - 使用 CSS 而不是表格来创建居中的图像列

Question

考虑用 CSS 样式替换此表​​的任务:

<table border="1">
  <tr><td align="center">
       <img src="foo" />
  </td></tr>
  <tr><td align="center">
       <img src="bar" />
    </td></tr>
  <tr><td align="center">
       <img src="bat" />
    </td></tr>
</table>

所需的输出是 3 张图像堆叠在一起。图像以最宽的图像为中心。

您如何使用 <div> 设置此标记的样式？围绕那些<img>使用 CSS 标签来实现相同的外观？

Answer 1

<div class="images">
  <img src="foo" />
  <img src="bar" />
  <img src="bat" />
</div>

在 CSS 中

div.images img {
  display: block;
  margin: 0 auto;
}