Verticaly對齊導航欄與CSS

Question

我正在製作一個有趣的網站，我把它放在導航欄中。唯一的問題是導航欄不是垂直居中，而是被鏈接向下推，導致徽標和導航欄之間留下不需要的空白區域。鏈接也太高，導致它們（當懸停時）不能保持在導航區域內。有沒有解決這個問題？下面 代碼：

HTML：

<nav id="nav"> 
    <ul> 
     <li><a href="http://www.google.com">hello</a></li> 
     <li><a href="http://www.google.com">hello</a></li> 
    </ul>  
</nav> 

的CSS：

.container{ 
width:1020px; 
margin:auto; 
position:relative; 
} 


    #nav{ 
width:1020px; 
height:50px; 
background-color:#EBB035; 
} 
#nav ul{ 
display:block; 
list-style-type:none; 
} 
#nav li{ 
display:inline; 
} 
#nav a:link{ 
color: #000000; 
font-weight: 700; 
padding: 8px; 
text-align: center; 
text-decoration: none; 
text-transform: uppercase; 
} 
#nav a:visited{ 
color: #000000; 
font-weight: 700; 
padding: 8px; 
text-align: center; 
text-decoration: none; 
text-transform: uppercase; 
} 
#nav a:hover{ 
background-color:#FFCC00; 
color: #000000; 
font-weight: 700; 
padding: 8px; 
text-align: center; 
text-decoration: none; 
text-transform: uppercase; 
} 

預先感謝您！

Answer 1

將定位添加到#nav和#nav ul如下;你會有結果like this

#nav { 
    width:1020px; 
    height:50px; 
    background-color:#EBB035; 
    position: absolute; 
} 
#nav ul { 
    display:block; 
    position: relative; 
    list-style-type:none; 
    margin-top: 1em; 
}