在两个div中彼此垂直对齐内容

Question

我彼此相邻有两个div。
左div包含徽标，右div包含一行链接（菜单）

我想将右div中的菜单与左div中的徽标垂直对齐。
这是代码：

<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

希望这是您想要的：

 #header { font-family: sans-serif; padding: 3% 0 2% 0; width: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .logo { display: inline-block; max-width: 19%; text-align: left; } .navigation { display: inline-block; text-align: right; width: 81%; } 

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

Answer 2

Flexbox应该可以解决问题。 看到这个小提琴 。

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

.logo {
    flex: 0 0 20%;
}

.navigation {
    flex: 0 0 80%;
}

Answer 3

将inline-block替换为table-cell。 它会工作。

Answer 4

作为CSS flexbox解决方案的替代方案...

https://jsfiddle.net/bLmcpc15/

HTML：

<div id="header">
    <div class="logo">
        <img id="logoimg" src="http://design.ubuntu.com/wp-content/uploads/ubuntu-logo32.png">
    </div>
    <div id="navigation">
    link 1  | link 2 | link 3
    </div>
</div>

JS：

$(document).ready(function(){
    var imgHeight = $("#logoimg").height();
    var navHeight = $("#navigation").height();
    var topMargin = (imgHeight-navHeight)/2;
    $("#navigation").css({"margin-top":topMargin});
});