html - header : Logo to the left, 向右导航。 (垂直居中对齐)

Question

我无法将导航对齐到页眉右侧。在网络上搜索，我认为问题是因为我将元素垂直对齐到中心，而 float 选项不适用。

有什么线索吗？

参见:http://jsfiddle.net/PabloArteeL/T7JDJ/

HTML:

<header>
    <div class="logowrapper" style="padding-left:1em;">
        <div class="logo"></div>
    </div>
    <nav><a href="#">SOME LINK</a>
    </nav>
</header>  

CSS:

header {
    background-color: #eaeaea;
    height: 80px;
    margin: 10px;
}
.logowrapper {
    display: table-cell;
    height: 80px;
    vertical-align: middle;
    text-align: center;
}
.logo {
    display: inline-block;
    background-image: url("http://placehold.it/250x40");
    width: 250px;
    height: 40px;
}
nav {
    right: 0px;
    display: table-cell;
    vertical-align: middle;
}
nav a {
    color: black;
    text-decoration: none;
}

期望的效果:

Answer 1

你需要给<nav>宽度和变化text-align:left;至 text-align:center;否则它不会居中文本:

nav {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width:400px;
}

结果:

JSFiddle