以 CSS 为中心

Question

我想在页面中间设置下拉菜单。我可以使它左对齐或居中，但现在它不再起作用了。

#navigation {
    margin-top: -50;
    background: #000;
    height: 3em;
    list-style: none;
    position: center;
    color: #fff;
    font-family: Arial;
    font-size: 14px;
    z-index: +1;
}

#navigation > li {
    position: relative;
    left:15%;
    display: inline;
    height: 100%;
    margin-right: 0.5em;
    padding: 0 1cm 0 1cm;
    z-index: 2;
}

#navigation > li > a {
    position: relative;
    left:15%;
    display: inline;
    height: 100%;
    color: #c60;
    text-decoration: none;
    line-height: 3;
    font-weight: bold;
    text-transform: uppercase;
    z-index: 2;
}

#navigation > li > a:hover {
    color: orange;
    text-decoration: underline;
    display: inline;
}

#navigation > li.sub {
    position: relative;
    display: inline;
}

#navigation > li.sub ul {
    width: 10em;
    margin: 0;
    padding: 0.5em 0;
    list-style: none;
    background: #a40;
    position: absolute;
    left:50%;
    display: inline;
    top: -1000em;
    z-index: +2;
}

#navigation > li.sub ul li {
    width: 90%;
    margin: 0 auto 0.3em auto;
    display: inline;
    z-index: +2;
}

#navigation > li.sub ul li a {
    height: 100%;
    display: block;
    padding: 0.4em;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
}

#navigation > li.sub ul li a:hover {
    background: #c60;
    text-decoration: underline;
    display: inline;
}

#navigation > li.sub:hover ul {
    top: 3em;
    z-index: +2;
}

此代码用于使菜单居中，但现在不起作用了。

Answer 1

由于您没有为您的导航下拉菜单提供 HTML 代码片段，我继续进行一些侦探工作来弄清楚它。所以假设 HTML 结构是这样的：

<ul id="navigation">
    <li class="sub">
        <a>option</a>
        <ul>
            <li><a>sub-option</a></li>
            <li><a>sub-option</a></li>
        </ul>
    </li>
    <li class="sub">
        <a>option</a>
        <ul>
            <li><a>sub-option</a></li>
            <li><a>sub-option</a></li>
        </ul>
    </li>
    <li>
        <a>lonely option</a>
    </li>
</ul>

我注意到您的 CSS 中存在一些问题，我在下面添加了评论来讨论这些问题。所以这是你当前的 CSS:

#navigation {
    margin-top: -50;     /* <-- missing measurement unit, px? em? */
    background: #000;
    height: 3em;
    list-style: none;
    position: center;    /* <-- no such thing as 'center' */
    color: #fff;
    font-family: Arial;
    font-size: 14px;
    z-index: +1;         /* <-- not a big deal but you can leave out the plus for positive integers. */
}

#navigation > li {
    position: relative;
    left:15%;            /* <-- this one ... */
    display: inline;
    height: 100%;
    margin-right: 0.5em;
    padding: 0 1cm 0 1cm;
    z-index: 2;
}

#navigation > li > a {
    position: relative;
    left:15%;            /* <-- ... and this were the ones causing you grief */
    display: inline;
    height: 100%;
    color: #c60;
    text-decoration: none;
    line-height: 3;
    font-weight: bold;
    text-transform: uppercase;
    z-index: 2;
}

#navigation > li > a:hover {
    color: orange;
    text-decoration: underline;
    display: inline;
}

#navigation > li.sub {
    position: relative;
    display: inline;
}

#navigation > li.sub ul {
    width: 10em;
    margin: 0;
    padding: 0.5em 0;
    list-style: none;
    background: #a40;
    position: absolute;
    left:50%;
    display: inline;
    top: -1000em;
    z-index: +2;
}

#navigation > li.sub ul li {
    width: 90%;
    margin: 0 auto 0.3em auto;
    display: inline;
    z-index: +2;
}

#navigation > li.sub ul li a {
    height: 100%;
    display: block;
    padding: 0.4em;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
}

#navigation > li.sub ul li a:hover {
    background: #c60;
    text-decoration: underline;
    display: inline;
}

#navigation > li.sub:hover ul {
    top: 3em;
    z-index: +2;
}

这是current state of the navigation dropdown。在解决您的问题之前，我必须解决以下问题：

原样从 #navigation {} 中删除了规则 position: center; 不是有效的规则并且没有做任何事情
从 #navigation > li {} 和 #navigation > li > a 中删除了规则 left: 15%。使用这两个规则尝试居中不仅没有真正居中下拉菜单，而且还导致它中断。
删除了规则margin-top: -50;，因为它什么也没做
在 #navigation > li {} 中将 display: inline; 更改为 display: inline-block;。这样 height: 100%; 将使 li 元素的高度与导航栏的高度相同。

现在所有这些都已解决 - 您需要做的就是在 #navigation {} 中使用 text-align: center，而不是使用 position: center。这将使您的导航居中。

最后，这里是 updated and working navigation dropdown 演示和代码。

以 CSS 为中心

Centering with CSS

css

center