中心對齊浮動導航欄並從左到右下拉

Question

我想中心對齊導航欄中的內容（以便img是導航欄的中心。我知道我有浮動：左;但是如果我不要，（左邊的東西，右邊的東西）會下降到img的底部邊緣，所以我想要的是保持浮動狀態，但是能夠顯示：inline-block或者其他相同的東西。我也想要下拉菜單酒吧爲（左事情）開始在IMG的左側，然後打造出右側。
demo fiddle

HTML

<div id="nav"> 
    <div id="container"> 
     <ul> 
      <li> 
       <a href="#"> Left thing </a> 

       <ul> 
        <li><a href="#"><----- want it to go this way</a> 
        </li> 
        <li><a href="#">i want this to start under left thing</a> 
        </li> 
       </ul> 
      </li> 
      <li> 
       <img src="http://www.jonathanjeter.com/images/Square_200x200.png" style="height:70px" /> 
      </li> 
      <li> 
       <a href="#"> Right thing </a> 

       <ul> 
        <li><a href="#">This starts right</a> 
        </li> 
        <li><a href="#">And this is right</a> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </div> 
</div> 

CSS

* { 
    padding: 0; 
    margin: 0; 
} 
#body { 
    padding: 0; 
    margin: 0; 
    font-family: Arial; 
    font-size: 17px; 
} 
#nav { 
    background-color: 72776A; 
    width: 100%; 
    position:fixed; 
    height:50px; 
} 
#nav ul { 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
    position: relative; 
    display:block; 
} 
#nav ul li { 
    float:left; 
} 
#container { 
    text-align:; 
} 
#nav ul li:hover { 
    background-color: #333; 
} 
#nav ul li a, visited { 
    color: ACD661; 
    display: block; 
    padding: 15px; 
    text-decoration: none; 
} 
#nav ul li:hover ul { 
    display: block; 
} 
#nav ul ul { 
    display: none; 
    position:absolute; 
    color: red; 
    border: 1px solid black; 
} 
#nav ul ul li { 
    display: block; 
} 
#nav ul ul li a:hover { 
    color: #699; 
} 

Answer 1

更換

#container { 
    width: 270px; 
    margin: 0px auto; 
} 

檢查this小提琴

Answer 2

談解決方案之前，讓我們來談談你的CSS，我刪除重複的margin:0, padding:0，突出forgetted選擇或鍵入錯誤。你需要精確一width要將容器div並添加margin-left和margin-right自動達到你想要的東西：

/* { 
    padding: 0; 
    margin: 0; 
} not the best solution, everybody don't need this rule */ 

/* instead here a group of selectors */ 

body, 
#nav ul { 
    padding: 0; 
    margin: 0; 
} 
/*#*/body { /* you mean just body right ? */ 
    font-family: Arial; 
    font-size: 17px; 
} 

#nav { 
    background-color: #72776A; /* you forgot # here */ 
    width: 100%; 
    position:fixed; 
    height:50px; /*it's smaller than your image*/ 
} 
#nav ul { 
    list-style-type: none; 
    position: relative; 
    /*display:block; don't need */ 
} 

#nav li { 
    float:left; 
} 
#container { 
    /*text-align:; seems it's missing something here ? */ 
    margin: 0 auto; 
    width: 300px; 
} 

#nav ul li:hover { 
    background-color: #333; 
} 

#nav ul li a, 
#nav ul li a:hover, 
#nav ul li a:visited {/ { /* you mean a:visited ? */ 
    color: #ACD661; /* here again # forgot */ 
    display: block; 
    padding: 15px; 
    text-decoration: none; 
} 
#nav li:hover ul { /*ul don't need (i mean #nav ul li...) */ 
    display: block; 
} 
#nav ul ul { 
    display: none; 
    position:absolute; 
    color: red; 
    border: 1px solid black; 
} 
#nav li li { /* shorter then ul ul li */ 
    display: block; 
} 
#nav a li a:hover { 
    color: #699; 
} 

你可以看到代碼here