html - 垂直对齐两个 div 中的内容

Question

我有两个相邻的 div。
左边的 div 包含一个 Logo ，右边的 div 包含一行链接(菜单)

我想将右侧 div 中的菜单与左侧 div 中的 Logo 垂直对齐。
这是代码:

<div id="header">
    <div class="logo">
        image.jpg
    </div>
    <div class="navigation">
    link 1  | link 2 | link 3
    </div>
</div>

CSS:

#header{
padding: 3% 0 2% 0;
width: 100%;
display:table;
}

.logo{
display:inline-block;
max-width:19%;  
text-align:left;
}

.navigation{
display:inline-block;
text-align:right;
width:81%;
}

Answer 1

Flexbox应该做的伎俩。看这个fiddle .

.header {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.logo {
    flex: 0 0 20%;
}

.navigation {
    flex: 0 0 80%;
}