Question

...在本教程的帮助下＆gt; coding.smashingmagazine.com/..

nav {
    color: #fff;
    background-color: #333;
    position: relative;
    height: 200px;
}

nav ul {
    list-style: none;
    overflow: auto;
    width: 50%;
    height: 50%;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

nav li {
    display: inline-block;
    margin: 0 10px;
    font-size: 25px;
    line-height: 100%;
}

我做不到。看看我的jsfiddle。

感谢您的帮助。

image ... chrome / macos x 10.8.x＆gt; ul v / h居中吗？

Answer 1

使用以下CSS可以更轻松地完成此操作。 UL无需绝对。见http://jsfiddle.net/9N2hW/2/

nav {
    color: #fff;
    background-color: #333;
    position: relative;
    height: 200px;
}

nav ul {
    list-style: none;
    overflow: auto;
    width: 50%;
    margin: auto;
}

nav li {
    display: inline-block;
    margin: 0 10px;
    font-size: 25px;
    line-height: 200px;
}

Answer 2

我会摆脱绝对定位，如果你愿意在导航容器上有一个固定的高度，你可以使用行高， like so ：

nav {
    color: #fff;
    background-color: #333;
    height: 200px; /* This must be defined and match the line-height below */
    text-align: center;
}

nav ul {
    white-space:nowrap;
    padding: 0;
}

nav li {
    display: inline;
    font-size: 25px;
    line-height: 200px; /* This must match the nav height defined above */
}

在nav中尝试绝对中心ul（垂直和水平）

2 个答案: