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%;
}

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

此外，在Chrome中，当窗口在高度上调整大小时，图像会拉伸而不是保留比例。

DEMO：http://jsfiddle.net/muxisar/4F7Zm/

Answer 1

您可以通过将一个元素转换为一个带有显示的表格并在img上设置display table-cell来实现垂直居中。

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

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

要进行缩放，您需要在a和li上设置高度。

更新小提琴：http://jsfiddle.net/XwzTU/12/

定位固定div，动态高度，图像对齐在ul

1 个答案: