在中間流體佈局中垂直顯示水平列表

Question

我有一個水平列表，我正在使用它作爲我的網站的導航欄。我運行流體佈局，所以我工作的百分比（％）的測量，以適應​​用戶的屏幕分辨率。我想垂直對齊我的水平列表在div的中心，但它只停留在div的頂部。這裏是我到目前爲止的代碼：

CSS：

#navBar{ 
    width: 100%; 
    height: 8%; 
    border: 1px; 
    border-color:black; 
    border-style:solid; 
    Background-color: white; 
    text-align:center; 
    vertical-align: middle; 
    font-size: 20px; 
    color: #B0B0B9 ; 
    font-family: 'myFancyFont', Times, serif; 
} 
#navBar2{ 
    list-style-type:none; 
    margin: 0; 
    padding:0; 
    text-align:center; 
} 
#navBar2 li{ 
    display: inline; 
    padding:0 20px 0px 20px; 
} 

我的HTML：

<div id="navBar"> 
    <ul id ="navBar2" > 
     <li><a href='#'> Home</a> </li> 
     <li><a href='#'> Events </a></li> 
     <li> <a href='#'>Gallery </a></li> 
     <li> <a href='#'>Contact Us </a></li> 
    </ul> 
</div> 

Answer 1

嘗試float:left上#navBar2 li

#navBar2 li 
{ 
float: left; 
padding:0 20px 0px 20px; 
} 

浮動調整好屏幕的寬度。 Read more about floats here