Центрировать горизонтальное меню с изображением посередине

Question

Я пытаюсь центрировать строку меню с моим логотипом посередине. сейчас все плавающее, но оно не будет центрироваться в середине страницы. Также, когда он отцентрирован, мне нужно, чтобы фоновое изображение, которое я разместил слева и справа от логотипа, изменило размеры в соответствии с шириной страницы - вот ссылка на то, как это выглядит в реальном времени - Тест меню

на моем веб-сайте у меня все еще есть оригинальное меню, которое я создал, где я поместил логотип за строкой меню и установил большую ширину, чтобы фон растягивался, но из-за этого не настраивался автоматически.... Текущее меню

Я знаю, что мой код не идеален, поэтому, пожалуйста, потерпите меня

HTML

    <div id="access">
      <div class="menu-container">

          <ul id="menu-left" class="menu">
                   <li class="menu-item">
                        <a href="#home">Home</a>
                    </li>
                    <li class="menu-item">  
                        <a href="#about">About</a>
                    </li>
                    <li class="menu-item">
                        <a href="#services">Services</a>
                    </li>
          </ul><!--END of menu-navigation-left-->  

          <ul id="menu-center">
           <li class="menu-item">
            <img src="images/logo.png" alt="Menu">
            </li>
         </ul> <!--close div center-->


         <ul id="menu-right" class="menu">
                        <li class="menu-item">
                            <a href="#">Blog</a>
                        </li>
                        <li class="menu-item">  
                            <a href="#contact">Contact</a>
                        </li>
                        <li class="menu-item">
                            <a href="#portfolio">Portfolio</a>
                        </li>
         </ul><!--END of menu-navigation-left-->

      </div><!--END of menu-navigation-container-->
    </div><!--END of access-->                         

CSS

   header {
    position:fixed;
    }


   #access {
    width:100%;
    overflow:hidden;
    left:50%;

   }

   #access ul.menu{
    display: inline-block;
    }

   #access ul {

   }

   #access ul a{
    display:block;
   }

   #access ul#menu-left { 
   height:120px;
   background-image:url(../images/menu.png);
   }

   #access ul#menu-center { 
   height:120px;
   }

   #access ul#menu-right { 
   height:120px;
   background-image:url(../images/menu.png);
   }


    ul, li {
    margin:0px;
    padding:0px;
    list-style:none;
    float:left;
    display:block;
    }



    #access a {
    display: block;
    font-size: 16px;
    line-height: 15px;
    padding: 13px 10px 12px 10px;
    text-transform: titlecase;
    text-decoration: none;
    font:"Mc1regular", Arial, sans-serif;
    }

    a:link{
    color:#fff;
    }

    a:visited{
    color:#fff;
    }

Answer 1

Это должно решить ваши проблемы с выравниванием.. просто замените вашими спецификациями. Я хотел бы иметь только одно меню и центрировать его.

ПОЖАЛУЙСТА, ОБРАТИТЕ ВНИМАНИЕ, ПОЛОЖЕНИЕ ВАШЕГО ЖАТКА ФИКСАЦИЙ

div.container {
width: 1160px;
margin: auto;
margin-top: -1;
margin-bottom: -1;
padding: 0;
padding-top: 10px;
background-color: #2d2d2d;
}

div.box {
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
padding: 10px;
padding-bottom: 20px;
border: solid 1px #A29060;
background-color: #000;
overflow: hidden;
width: 940px;
}
div.top {
text-align: left;
margin: auto;
margin-left: 20px;
padding-top: 12px;
padding-bottom: 11px;
font-weight: normal;
font-size: 14px;
overflow: hidden;
width: 980px;
text-transform: uppercase;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
 li {
float: left;
padding-right: 20px;
 }
 a {
display: block;
color: #a29060;
text-decoration: none;
}


<div class="container">
  <div class="box">
    <div class="top">
      <ul >
        <li><a href="contact.html" title="">Contact</a></li>
        <li><a href="policy.html" title="">Policies</a></li>
        <li><img class="logo"  src="images/logo.jpg" alt="logo" /></li>
         <li><a href="policy.html" title="">Policies</a></li> 
      </ul>
    </div>

увидеть эту скрипку

http://jsfiddle.net/yvytty/RJ4Yp/

Вы также можете взглянуть на это (оно еще не закончено), но у него есть отсортированный базовый макет, меню и т. Д.

https://www.yve3.com/index.html

Это также ссылка на отличный форум, HTML.net. Они дают вам хорошее мнение о вашем сайте и имеют большой опыт (как здесь)

http://www.html.net/forums/