居中列表項目

Question

對於一個項目，我有一個（移動）導航欄，菜單按鈕左側浮動，右側爲'返回頂部'按鈕。我想在導航欄中居中放置一個徽標。我目前正在處理一個無序列表。

的HTML基本上是這樣的：

<div class="navbar"> 
    <ul> 
      <li class="navmenu"><i class="icon-menu"></i></li> 
      <li class="mobilelogo"><a href="#top"><img class="moblogopic" src="media/navbarlogo.png" alt="logo"/></a></li> 
      <li class="up-icon" title="Back to top"><a href="#top"><i class="icon-up"></i></a></li> 
    </ul> 
</div> 

的CSS是這樣的：

.navbar{ 
width:100%; 
height: 45px; 
} 
.navbar ul{ 
padding: 0 10px; 
} 
.navmenu{ 
display:inline; 
float: left; 
} 
.mobilelogo{ 
display:inline; 
float:left; 
margin: 0 auto; 
} 
.up-icon{ 
display: inline; 
float:right; 
} 

保證金：0汽車;似乎沒有工作。我不能使用像margin-left這樣的東西：50％，因爲該網站必須做出反應並重新調整大小。該導航欄目前看起來是這樣的：

Answer 1

你必須設置你的寬度，然後..：

.navbar{ 
width:100%; 
height: 45px; 
} 
.navbar ul{ 
padding: 0 10px; 
} 
.navmenu{ 
display:inline; 
float: left; 
width:20%; 
} 
.mobilelogo{ 
display:inline; 
float:left; 
margin: 0 auto; 
width:60%; 
text-align:center; 
} 
.up-icon{ 
display: inline; 
float:right; 
width:20%; 
}