Вертикально выравнивание перемещаемого элемента

Question

Я пытаюсь вертикально выровнять мой уль тег и тег внутри DIV

У меня есть что-то вроде

<div id='tabs-container'> 
     <ul id='tabs'> 
     <li><a href='#'><img src='images/homeBtn.png'</a></li> 
     <li><a href='#'>task</a></li> 
     <li><a href='#'>result</a></li> 
     <li><a href='#'>Store</a></li> 
     </ul> 
     <a id='grade-btn' href='#'>checkout</a> 
    </div> 

---------------------------------------------------------- 
| 
| img task result store      checkout  <- vertically align inside a div 
|_________________________________________________________ 

Я хочу что-то вроде выше.

My css.

#tabs-container{  
    height: 65px; 
    position: relative; 
    vertical-align: middle; 
} 

#tabs{ 
    float: left; 
} 

#tabs li{ 
    vertical-align: middle; 
    display: inline-block; 
    background-color: black; 
    margin: 15px; 
    vertical-align: middle; 
} 

#grade-btn{ 
    vertical-align: middle; 
    display: inline-block; 
    color: white; 
    float: right; 
} 

Это действительно не работает. Вывод не выравнивается по вертикали.

Answer 1

Добавить в закладки-контейнер line-height: 65px;