css - 在固定高度空间内垂直均匀分布图像

Question

我有 3 张图像在固定高度的 div 中垂直对齐。如何确保即使添加或删除图像时它们之间的顶部和底部填充仍然存在。

假设 Div 高度为 100px，图像高度为 20px。所以 3 张 20px 的图像总和为 60px。剩余的 40 像素应作为图像之间的填充均匀分布。

类似地，当添加另一张图片时，剩余的 20px 应该是所有图片之间的总填充。

属性 : vertical-align: middle 在这里不起作用。

Answer 1

你想要:

1. 将 div 设置为 display:table固定高度，
2. 包装每个<img>在元素中 display:table-row和 display:table-cell
3. 将图片设置为display:block
4. 将表格单元格元素设置为vertical-align:middle
5. 将第一行和最后一行的高度设置为与图片本身一样高

这将导致空间在垂直方向上均匀分布。

演示:http://jsfiddle.net/X2URZ/2/

代码:

<ul id="img-list">
  <li><span><img src="http://phrogz.net/tmp/gkhead.jpg"></span></li>
  <li><span><img src="http://phrogz.net/tmp/gkhead.jpg"></span></li>
  <li><span><img src="http://phrogz.net/tmp/gkhead.jpg"></span></li>
</ul>​

#img-list { display:table; height:100px }
#img-list img { height:20px; display:block }
#img-list li { display:table-row }
#img-list li span { display:table-cell; vertical-align:middle; background:red }
#img-list li:first-child,
#img-list li:last-child { height:20px }​