html - 无法将包含菜单的 div 居中。所以很困惑

Question

为了让菜单居中，我已经尝试了大约一个小时。

我已经尝试了 Google 向我提供的所有建议，但都无济于事。

有人可以告诉我我做错了什么明显的事情吗？

这是 HTML:

<header>
<div class="wrap-header zerogrid">
    <div id="logo"><a href="#"><img src="./images/logonew.png"/></a></div>
    <nav>
        <div class="wrap-nav">
            <div class="menu">
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="food.html">Our Food</a></li>
                    <li><a href="drinks.html">Our Bar</a></li>
                    <li><a href="gallery.html">Gallery</a></li>
                    <li><a href="contact.html">Contact Us</a></li>
                </ul>
            </div>

            <div class="minimenu"><div>MENU</div>
                <select onchange="location=this.value">
                    <option></option>
                    <option value="index.html">Home</option>
                    <option value="food.html">Our Food</option>
                    <option value="single.html">Our Bar</option>
                    <option value="gallery.html">Gallery</option>
                    <option value="contact.html">Contact Us</option>
                </select>
            </div>
        </div>
    </nav>
</div>

这是 CSS:

header {background:#e7dcd5; border-bottom: 0px solid #e7dcd5; background:url(../images/speckledbg.jpg) repeat scroll 0 0; text-align: center;}
header .wrap-header{height: 150px; text-align: center;}
header #logo {position:absolute; top: 15px;  padding:5px; width: 100%; margin: 0 auto;}

nav {width:100%;text-align:center; height:37px; display:block; margin-left:auto;margin-right:auto;}
nav .wrap-nav{position:absolute; top:115px; height: 37px; background:#e7dcd5; text-align:center;}

.menu ul {list-style: none;margin: 0;padding: 0; text-align:center; }
.menu  ul li {position: relative;float: left;padding: 6px 5px 0px 5px;}
.menu  ul li:hover {background:#b9aaa0;}
.menu  ul li a {font-size: 18px; line-height:14px;color: #3e3223;display: block;padding: 6px 10px;margin-bottom: 5px;z-index: 6;position: relative;}
.menu  ul li:hover a {color:#ffffff;}

.minimenu{display:none;}
.minimenu{position: relative;margin: 0px;background:#333333;}
.minimenu div{overflow: hidden;position: relative;font: 18px/37px 'PT Sans Narrow' !important;color: #fff;text-align:center;text-transform:uppercase;font-weight:bold;}
.minimenu select{position: absolute;top: 0px;left: 0px;width: 100%;height: 100%; opacity: 0;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); cursor: pointer;}

Here's a JSFiddle

提前致谢

Answer 1

您需要指定 .wrap-nav 的宽度并将 display:inline-block 分配给菜单，这就完成了。

你可以看到它在这里工作:http://jsfiddle.net/gFb8k/5/