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

Question

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

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

同样，当添加另一个图像时，剩余的 20px 应该是所有图像之间的总填充。

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

Answer 1

你想要：

1. 将 div 设置display:table为固定高度，
2. 用and包裹每个<img>元素display:table-rowdisplay: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 }​

Answer 2

我知道下次我搜索它时一定会再次偶然发现它。留下这个作为我自己的参考。不同之处在于元素本身不必具有固定的高度：

http://codepen.io/anon/pen/ojBPaq?editors=110

HTML

<ul>
  <li><div class="tile-wrap one"><div class="tile">wefwfwefww efwefwfwfewfwef wefwfwf wefwfe wefwf wefwfwfwfwf wef wefwfe</div></div></li>
  <li><div class="tile-wrap two"><div class="tile"></div></div></li>
  <li><div class="tile-wrap three"><div class="tile"></div></div></li>
</ul>

CSS

* { box-sizing: border-box; }

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background: grey;
  width: 500px;
  height: 400px;
  display: table;
}

li {
  display: table-row;
  background: aqua;
  vertical-align: bottom;
}

.tile-wrap {
  display: table-cell;
  vertical-align: middle;
}

.one {
  vertical-align: top;
}

.two {
  vertical-align: middle;
}

.three {
  vertical-align: bottom;
}

.tile-wrap .tile {
  width: 100px;
  min-height: 100px;
  background: white;
  border: 1px solid blue;

}