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

Question

I have a horizontal list which I am using as my navigation bar for my website. I am running off a fluid layout so i work with the measurement of percentages(%) in order to adjust to the screen resolution of the user. I want to vertically align my horizontal list in the centre of the div yet it just stays at the top of the div. here is my code so far:

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;
}

my 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

Try float:left on #navBar2 li

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

Floats adjust better to screen widths. Read more about floats here