标题：左侧的徽标，导航到右侧。 （垂直对齐中心）

Question

我无法将导航与标题右侧对齐。在网上搜索，我认为问题是因为我将项目垂直对齐到中心，并且浮动选项不适用。

任何线索？

请参阅：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

Answer 2

试试这个：

<header>
    <div class="logowrapper">
        <div class="logo"></div>
    </div>
    <div class = "link">
    <nav><a href="#">SOME LINK</a>
    </nav>
    <div>
</header>

css：

 header {
    background-color: #eaeaea;
    height: 80px;
    margin: 10px;
}
.logowrapper {
    height: 80px;
    vertical-align: middle;
    text-align: center;
    padding-left:1em;
    float: left;
    padding: 18px;
}
.logo {
    background-image: url("http://placehold.it/250x40");
    width: 250px;
    height: 40px;
}

.link {
    padding: 30px;
}
nav {
    right: 0px;
    vertical-align: middle;
    text-align: left;
    float: right;
}
nav a {
    color: black;
    text-decoration: none;
}

Answer 3

想象一下，只有文字才会有效。更好的解决方案是使用浮点数和边距。对于一般元素并排，最好使用display: block而不是display: table-cell来模拟<td>

http://jsfiddle.net/T7JDJ/8/

只需根据自己的喜好更改边距和宽度。