Question

我现在已经尝试了大约一个小时来让菜单居中。

我已经尝试了谷歌向我建议的一切，但无济于事。

有人可以告诉我，我做错了什么显而易见的事吗？

这是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/

Answer 2

尝试按以下方式更改您的风格：

nav .wrap-nav{
  position:relative;width:500px; top:115px; height: 37px; background:#e7dcd5;    
  text-align:center;margin:auto;
}

Answer 3

<强> CSS：

nav .wrap-nav{
      position:relative;
      width:500px; 
      top:115px; 
      height: 37px; 
      background:#e7dcd5;    
      text-align:center;
      margin: 0px auto;
}
.menu ul {
     list-style: none;
     margin: 0;
     padding: 0;
     text-align: center;
     display: inline-block;
}

Answer 4

我删除了课程position:absolute中的属性nav .wrap-nav，并在课程.menu ul li中添加了属性width:20%。

这是jsfiddle： Link

Answer 5

修改css，如：

nav .wrap-nav{
     /*position:absolute;*/
     top:115px;
     height: 37px;
     background:#e7dcd5;
     text-align:center;
     /*Add these lines*/
     margin: 0 auto; /*center the container if have a width*/
     width: 500px; /8set value width you want*/
}

无法居中包含菜单的div ..所以很困惑

5 个答案: