居中垂直对齐和100％高度的水平菜单栏

我期待让我的菜单栏上的所有内容垂直对齐中心，a元素占用菜单栏可用高度的100％以veritcally为中心）。但是，我不想修复我的菜单栏的高度。（如果我要修复高度，我只需使用line-height进行垂直对齐）。居中垂直对齐和100％高度的水平菜单栏

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）

来源

2014-07-15 Cheetah

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

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

DEMO

来源

2014-07-15 11:47:57

-1

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

代码：这里

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

的jsfiddle演示link

来源

2014-07-15 11:48:12 Veselin

居中垂直对齐和100％高度的水平菜单栏

回答

相关问题