Как сделать навигационную панель Google

Question

, поэтому я попробовал много техники, но никто из них не работал. Я новичок в HTML, просто изучаю колледж и пытаюсь сделать навигационную панель google-like . Проблема, которую я имею, - это центрировать правильные ссылки. Я пробовал vertical-align, position: relative/absolute с top:50%, но он все еще не работает. Какие-либо предложения?

Текущий код

CSS

nav{border-bottom:2px solid black; height:60px;} 
     #right{float:right;} 
     #left{float:left;} 

HTML

<nav> 
    <div id="left">Test (Will be an image in the future)</div> 
    <div id="right">Test</div> 
    </nav> 

Answer 1

Одним из способов было бы добавить line-height:60px к вашим правилам для nav:

nav { 
    border-bottom:2px solid black; 
    height:60px; 
    line-height:60px; 
} 

jsFiddle example

Answer 2

Навигационные панели обычно изготавливаются со связанными списками. Для этого в Интернете есть много учебников, вы можете найти простой пример here.

Также имейте в виду, что nav является элементом HTML5 и может не отображаться корректно во всех браузерах.