Отображение горизонтального списка по вертикали в средней компоновке жидкости

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