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

Question

我有3个图像垂直对齐固定高度div.即使添加或删除图像,如何确保它们之间的顶部和底部填充仍然保留.

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

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

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

Answer 1

你想要:

1. 将div设置display:table为固定高度,
2. <img>用display:table-row和包裹每个元素display:table-cell
3. 将图像设置为 display:block
4. 将table-cell元素设置为 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 }?