在css中垂直（在元素的上方，下方和中间）均匀分布空白区域

Question

我发现this topic关于在一个固定高度的空间上垂直分布三个图像。

我想在一个固定高度的空间上分配三个按钮，但是我需要空（红色）空间在元素之间以及在顶部和最后一个元素之上均匀分布。这是我的代码：

<-- HTML -->
<ul id="button-list">
<li><span><button>1st button</button></span></li>
<li><span><button>2nd button</button></span></li>
<li><span><button>3rd button</button></span></li>
</ul>

<-- CSS -->
#button-list { display:table; height:150px; background: red}
#button-list button { width: 100%; display:block }
#button-list li { display:table-row }
#button-list li span { display:table-cell; vertical-align:middle; background:red }
#button-list li:first-child,
#button-list li:last-child { height:20px }

这是changed fiddle。有什么想法吗？

p.s：我已经尝试了没有<span>代码的代码，因为我认为<button>代码可以替代它们。它没用，为什么？

Answer 1

如果您简单地删除#img-list li:first-child, #img-list li:last-child { height:20px }和#img-list li:first-child,#img-list li:last-child { height:20px }，就可以使用您已经使用的代码（表格内容）获得所需的结果：

http://jsfiddle.net/jhLhhf1u/2/