如何對齊CSS導航欄中間的元素？

Question

我需要幫助，以在我的導航欄中間對齊對象，但它很奇怪我不擅長網頁設計這是我第一週的學習，但我找不到任何其他來源來弄清楚這一點。

這是我的導航欄

這裏是我的CSS代碼：

#nav{ 
    display: block; 
    background-color: #fff; 
    width:100%; 
    min-width:1003px; 
    max-height:50px; 
    padding:0; 
    margin: 0; 
    position: absolute; 
    top:0; 
    left: 0; 
    box-shadow: 0px 1px 1px #fff; 
    clear: both; 
} 
#nav ul{ 
    display: inline-block; 
    vertical-align: middle; 
} 
#nav a{ 
    display: inline-block; 
    vertical-align: middle; 
    font-family: Code2; 
    text-decoration: none; 
    color: #000; 
    padding: 11px; 
    clear: both; 
} 
#nav a:hover{ 
    color:#FF2054; 
} 
#nav li{ 
    display: inline; 
} 
#nav img{ 
    clear:both; 
    height:40px; 
    width:40px; 
    content: ""; 
} 
#nav h1{ 
    font-weight: normal; 
} 
.textbox { 
    background:transparent url(http://i.imgur.com/gPoM6WK.jpg) no-repeat 4px 4px; 
    margin:0; 
    margin-top: -4px; 
    max-width:250px; 
    padding-left:23px; 
    display: inline; 
    border:2px solid #999999; 
    height:28px; 
    border-radius: 3pt; 
    font-family: Code2; 
} 
</style> 

這是我的HTML代碼：

<div id="nav"> 
<ul> 
<li> 
<a href=""><img src="http://a.deviantart.net/avatars/e/v/evilmaysmile.jpg?1" width="50" height="50" /></a> 
</li> 
<li> 
<form action="search.pl" method="get" style="display:inline;"> 
<input name="q" class="textbox" type="text" size="28" placeholder="SEARCH..."> 
</form> 
</li> 
<li> 
<a href="#">BROWSE</a> 
</li> 
<div style="float:right;"> 
<li> 
<a href="#">HOW IT WORKS</a> 
</li> 
<li> 
<a href="" style="">SIGN UP</a> 
</li> 
<li> 
<a href="">LOGIN</a> 
</li> 
</div> 
</ul> 
</div> 

在此先感謝。

Answer 1

嘗試在CSS使用text-align:center

Answer 2

您可以添加text-align:center;到#nav ul像這樣：

#nav ul { 
    display: inline-block; 
    vertical-align: middle; 
    text-align: center; 
} 

Answer 3

沒有必要爲<div style="float:right;"> 看看這個小提琴

https://jsfiddle.net/xfhqtd6k/

Answer 4

在你的情況下，你可以添加text-align: center;到你的#na v造型

那麼這樣做是爲了擺脫一個UI元素上微胖的你似乎是導致它不會被完全集中

#nav ul:first-of-type { 
    padding: 0; 
} 

Answer 5

我編輯了自己的代碼一點點。問題出現了，因爲我已經改變了你的css標誌。

#nav{ 
    display: block; 
    background-color: #fff; 
    width:100%; 
    min-width:1003px; 
    max-height:50px; 
    padding:0; 
    margin: 0; 
    position: absolute; 
    top:0; 
    left: 0; 
    box-shadow: 0px 1px 1px #fff; 
    clear: both; 
} 
#nav ul{ 

    vertical-align: middle; 
} 
#nav a{ 
    display: inline-block; 
    vertical-align: middle; 
    font-family: Code2; 
    text-decoration: none; 
    color: #000; 
    padding: 11px; 
    clear: both; 
} 
#nav a:hover{ 
    color:#FF2054; 
} 
#nav li{ 
    display: inline; 

} 



#nav img{ 
    clear:both; 
    height:40px; 
    width:40px; 
    content: ""; 
} 
#nav h1{ 
    font-weight: normal; 
} 
.textbox { 
    background:transparent url(http://i.imgur.com/gPoM6WK.jpg) no-repeat 4px 4px; 
    margin:0; 
    margin-top: -4px; 
    max-width:250px; 
    padding-left:23px; 
    display: inline; 
    border:2px solid #999999; 
    height:28px; 
    border-radius: 3pt; 
    font-family: Code2; 
} 

我已經在div上添加了margin-top來處理它裏面的列表並將它內聯。

<div id="nav"> 
<ul> 
<li> 
<a href=""><img src="http://a.deviantart.net/avatars/e/v/evilmaysmile.jpg?1" /></a> 
</li> 
<li> 
<form action="search.pl" method="get" style="display:inline;"> 
<input name="q" class="textbox" type="text" size="28" placeholder="SEARCH..."> 
</form> 
</li> 
<li> 
<a href="#">BROWSE</a> 
</li> 

<div style="float:right; margin-top:15px;"> 

<li> 
<a href="#">HOW IT WORKS</a> 
</li> 
<li> 
<a href="" style="">SIGN UP</a> 
</li> 
<li> 
<a href="">LOGIN</a> 
</li> 
</ul> 
</div> 
</div>