使用CSS垂直对齐各种对象/项目

我正在建立一个临时站点，我想垂直对齐（中间）徽标和菜单项，但我无法成功。

这是我当前的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;
}

为了简化，我去掉了所有其他的样式，比如颜色。

任何帮助都将不胜感激！

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

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

所以代码真的很简单

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

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

相关内容

最新更新

热门标签：