Блог

Я уже около часа пытаюсь центрировать меню.

Я перепробовал все, что предложил мне 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;}
 

Вот JSFiddle

Заранее спасибо

Вам нужно указать ширину для .wrap-nav и назначить a display:inline-block в меню, и все готово.

Вы можете увидеть, как это работает здесь: http://jsfiddle.net/gFb8k/5 /

Попробуйте изменить свой стиль следующим образом:

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

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;
}
 

Я удалил атрибут position:absolute в классе nav .wrap-nav и добавил в класс .menu ul li атрибут width:20% .

Вот ссылка jsfiddle:

Измените 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*/
}