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

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

在 #navBar2 li 上尝试 float:left

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

float 更好地适应屏幕宽度。 Read more about floats here