html - 在网页顶部居中放置菜单

Question

首先，here is a Fiddle这是 HTML 和 CSS:

<div class="menu-wrap">
    <nav class="menu">
        <ul class="clearfix">
            <li class="current-item"><a href="#">Home</a>
            </li>
            <li>    <a href="#">Info <span class="arrow">&#9660;</span></a>

                <ul class="sub-menu">
                    <li><a href="#">Rehearsal Dinner</a>
                    </li>
                    <li><a href="#">Wedding</a>
                    </li>
                    <li><a href="#">Reception</a>
                    </li>
                </ul>
            </li>
            <li><a href="#">Photos</a>
            </li>
            <li><a href="#">Directions</a>
            </li>
            <li><a href="#">RSVP</a>
            </li>
        </ul>
    </nav>
</div>
<img src="http://placekitten.com/g/800/600" alt="Snow" class="background">
<footer></footer>

CSS:

body {
    font-family: Helvetica, Arial, sans-serif;
    background-color: rgb(231, 242, 208);
    width: 960px;
    padding-top: 0;
    margin: 0 auto;
}

.clearfix:after {
    display: block;
    clear: both;
}

h1 {
    position: fixed;
    top: 0px;
    left: 0px;
    padding: 10px;
    margin: 0px;
    width: 100%;
    height: 50px;
    background-color: #3300EE;
}

.background {
    width: 100%;
    margin-left: 0%;
    margin-top: 100px;

}

/* Menu Outline */
.menu-wrap {
    width: 100%;
    background-color: rgb(150, 150, 150);
    text-align: center;
    position: fixed;
    top: 0px;
    left: 0px;

}

.menu {
    width: 100%;
    margin: 0 auto;
}

.menu li {
    margin: 0px;
    list-style: none;
    display: inline;
}

.menu a {
    transition: all linear 0.15s;
    color: black;
    text-decoration: none;
    display: inline-block;
    padding: 10px;
}

.menu li:hover > a, .menu .current-item > a {
    text-decoration: none;
    color: black;
}

.menu .arrow {
    font-size: 11px;
    line-height: 0%;
}

.menu > ul > li {
    float: left;
    display: inline-block;
    position: relative;
    font-size: 19px;
}

.menu > ul > li > a {
    padding: 10px 40px;
    display: inline-block;
}

.menu > ul > li:hover > a, .menu > ul > .current-item > a {
    background: rgb(120, 214, 126);
}

.sub-menu {
    width: 160%;
    padding: 5px 0px;
    position: absolute;
    text-align: left;
    top: 100%;
    left: 0px;
    z-index: -1;
    opacity: 0;
    trasition: opacity linear 0.15s;
    background: rgb(120, 214, 126);
}

.menu li:hover .sub-menu {
    z-index: 1;
    opacity: 1;
}

.sub-menu li {
    display: block;
    font-size: 16px;
}

.sub-menu li a {
    padding: 10px 30px;
    display: block;
}

.sub-menu li a:hover, .sub-menu .current-item a {
    background: gray;
}

footer {
    height: 1000px;
}

我想要做的是让菜单在屏幕的顶部居中，而不是像现在这样从左边缩进一定量。另外，是否也可以将菜单垂直居中？我暂时通过将 padding-bottom 增加到 10px 来捏造那个，但我确信有比这更好、更可靠的解决方案。

我从 this blog post 得到了菜单栏的代码如果您希望在我略微更改之前查看菜单设置。

Answer 1

只需从 .menu > ul > li 规则中删除 float:left。

jsFiddle example