居中垂直對齊和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％高度的水平菜單欄

回答

相關問題