Question

我有3张图像垂直对齐固定高度div。即使添加或删除图像，我怎样才能确保它们之间的顶部和底部填充保持不变。

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

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

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

Answer 1

你想要：

将div设置为display:table，其高度固定，
使用<img>和display:table-row

display:table-cell

将图片设置为display:block
将table-cell元素设置为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 }

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;

}

在固定高度的空间内均匀分布图像

2 个答案:

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