具有居中垂直对齐和 100% 高度的水平菜单栏答案

【问题标题】：Horizontal menu-bar with centered vertical alignment and 100% height具有居中垂直对齐和 100% 高度的水平菜单栏
【发布时间】：2014-07-15 22:40:36
【问题描述】：

我希望我的菜单栏上的所有内容都垂直居中对齐，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）

【问题讨论】：

标签： html css

【解决方案1】：

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

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

DEMO

【讨论】：

【解决方案2】：

将 vertical-align:middle; 添加到您的 inline-block 元素中，这将覆盖默认的基线垂直对齐

代码：

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

jsfiddle 演示在这里link

【讨论】：