html - 试图在导航中绝对居中 ul（垂直和水平）

Question

...在本教程的帮助下 > 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。

谢谢你的帮助。

图像... chrome/macos x 10.8.x > ul v/h 居中吗？

Answer 1

我会摆脱绝对定位，如果您愿意为导航容器设置固定高度，则可以使用行高，如下所示：

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 */
}

Answer 2

使用以下 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;
}