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

【问题标题】：Evenly distribute images vertically within fixed-height space在固定高度的空间内垂直均匀分布图像
【发布时间】：2012-08-29 07:23:47
【问题描述】：

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

假设 Div 高度为 100px，图像高度为 20px。所以 3 个 20px 的图像加起来是 60px。剩余的 40px 应作为填充均匀分布在图像之间。

同样，当添加另一张图片时，剩余的 20px 应该是所有图片之间的总内边距。

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

【问题讨论】：

标签： css

【解决方案1】：

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

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;

}

【讨论】：

【解决方案2】：

你想：

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

这会使空间垂直分布均匀。

演示：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 }

【讨论】：