在中间流体布局中垂直显示水平列表

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