将各种对象/项目与CSS垂直对齐

Question

我正在建立一个临时网站，我想(到中间)的标志和菜单项垂直对齐，但我无法实现成功。

下面是我当前的HTML代码：

<!DOCTYPE html>

<html>
<head>
    <title></title>
</head>

<body>
    <div class="header">
        <a class="logo" href="/index.html"><img class="logo" src="/images/logo.png"></a>

        <a class="menu" href="/whatever.html">Menu Item 1</a>
        <a class="menu" href="/whatever.html">Menu Item 2</a>
        <a class="menu" href="/whatever.html">Menu Item 3</a>
        <a class="menu" href="/whatever.html">Menu Item 4</a>
    </div>

</body>
</html>

下面是我当前的CSS代码：

.header {
    display: block;
}

.logo {
    display: inline-block;
    vertical-align: middle;
}

.menu {
    display: inline-block;
    vertical-align: middle;
}

为了简化，我删除了所有其他样式，比如颜色。

任何帮助都将不胜感激！

Answer 1

根据w3的说法：http://www.w3.org/Style/Examples/007/center.en.html#vertical

CSS level 2没有垂直居中的属性。在CSS级别3中可能会有一个，但即使在CSS2中，你也可以通过组合几个属性来垂直居中。技巧是指定外部块将格式化为表格单元格，因为表格单元格的内容可以垂直居中。

所以代码非常简单

#container{
    display: table-cell;
    vertical-align: middle;
    height: 200px;
}

这是一个演示http://jsfiddle.net/4PJUr/