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

因此代码非常简单

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

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

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

1 个答案: