html - 位置固定div，动态高度，ul中图片对齐

Question

所以，我有一个 div，位置固定，静态宽度和高度为 100%。在该 div 内，我想水平拆分包含图像(内部链接)的 ul。

HTML 结构:

<div>
  <ul>
    <li><a href="#"><img src="icon.jpg" alt=""></a></li>
    <li><a href="#"><img src="icon.jpg" alt=""></a></li>
    <li><a href="#"><img src="icon.jpg" alt=""></a></li>
  </ul>
</div>

CSS:

html, body { height: 100%; }
html *, body * { margin: 0; padding: 0; }

div {
  width: 200px;
  position: fixed;
  height: 100%;
}
ul {
  height: 100%;
}
li {
  height: 33.333333333%;
  text-align: center;
}
img {
  height: 60%;
}

但是，我该如何设置垂直对齐。我已经尝试了很多使用垂直对齐(或其他技巧)的方法，但没有任何反应，肯定是因为定位固定了。我应该选择其他解决方案吗？

此外，在 Chrome 中，当窗口根据高度调整大小时，图像会拉伸(stretch)而不是保持比例。

演示:http://jsfiddle.net/muxisar/4F7Zm/

Answer 1

可以通过将a元素转换为带显示的table，在img上设置display table-cell，实现垂直居中。

a {
    display: table;
    height: 100%;
}

li {
    display: table-cell;
    height: 80%;
    vertical-align: middle;
}

要获得缩放比例，您还需要在 a 和 li 上设置高度。

更新 fiddle :http://jsfiddle.net/XwzTU/12/