Question

我正在尝试在我的网站上有一个垂直导航部分，它位于屏幕的最左侧，垂直位于中心。我也试图让它响应屏幕高度。我通过在vh中设置字体高度来完成此操作。它在Chrome中运行得很好，但在IE和Firefox中，整个元素都停留在页面顶部。我对网页设计有点新意，欢迎任何帮助！

HTML

<nav><ul>
<a href=#><li>home</li></a>
<a href=#><li>about</li></a>
<a href=#><li>work</li></a>
<a href=#><li>contact</li></a></ul>
</nav>

CSS

nav {
bottom:0;
display: table;
font-size:7vh;
height: auto;
line-height:15vh;
margin:auto;
overflow: auto;
padding:3vh;
padding-right:5vh;
position:absolute;
top:0;
vertical-align:central;
z-index:1}

Answer 1

Vertical-middle:center在某些浏览器（如Internet Explorer（甚至不是IE 8测试版））中确实无效。只需使用margin-top:60x代替vertical-align:center即可。 Working Fiddle

<强> CSS：

nav {
bottom:0;
display: table;
font-size:7vh;
height: auto;
line-height:15vh;
margin:auto;
overflow: auto;
padding:3vh;
padding-right:5vh;
position:absolute;
top:0;
margin-top:60px;
z-index:1}

请参阅此blog了解与css的垂直居中。

垂直居中的绝对定位元素仅在Chrome中正确显示

1 个答案: