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

Answer 2

将vertical-align:middle;添加到您的内联块元素，这将覆盖默认基线vertical-align

代码：

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

jsfiddle demo here link

水平菜单栏，中心垂直对齐，高度100％

2 个答案: