css - 谷歌导航栏的制作方法

Question

所以我尝试了很多技巧，但都没有奏效。我是 HTML 的新手，只是在大学学习它并尝试制作一个类似 google 的导航栏。我的问题是将正确的链接居中。我尝试了 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