0

所以，我有一个 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 中，当窗口在高度上调整大小时，图像会拉伸而不是保持比例。

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

4

1 回答 1

0

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

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

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

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

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

于 2013-10-14T11:58:23.540 回答