html - 垂直居中对齐且高度为 100% 的水平菜单栏

Question

我希望让菜单栏上的所有内容在中心垂直对齐，a 元素占据菜单栏可用高度的 100%(文本将垂直居中) .但是，我不想固定菜单栏的高度。 (如果要固定高度，我会使用 line-height 进行垂直对齐)。

HTML:

<div id="head">
    <h1>My header</h1>
    <ul id="nav">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
</div>

CSS:

#head {
    background: #ccc;
    width: 100%;
}

h1 { margin: 0; }
h1, #nav, #nav li { display: inline-block; }
#nav a:hover { background: red; }

JsFiddle:http://jsfiddle.net/m3qGs/

我想要实现的效果就像 JsFiddle 的菜单栏，但没有固定高度。我更愿意只用 CSS(即没有 Javascript)来做到这一点

Answer 1

在下面的类中添加vertical-align:middle。

 h1, #nav, #nav li { display: inline-block; vertical-align:middle; }

DEMO