垂直居中

Question

我有一個菜單和CSS如下圖所示，也玩上http://codepen.io/Sofian777/pen/PqeyQa

我需要垂直對齊的菜單項，並嘗試了所有種類的事情垂直 - 對齊：中間和不同的顯示：li和a上的設置（因爲它在線工作在內聯元素上），但我無法使它工作。

任何人都知道如何做到這一點？

編輯：這就是我認爲將有足夠的簡化方案，但它不是，所以這裏是我的全部場景：http://codepen.io/Sofian777/pen/NqMOom（見我的評論簡短說明GolezTrol的答案）

<div id="menu"> 
     <ul> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">Menu Item</a></li> 
      <li><a href="#">Categories</a></li> 
      <li><a href="#">Contact</a></li> 
     </ul> 
</div> 

#menu {background: CornflowerBlue; 
    width: 100%;} 

#menu ul { 
    list-style-type: none; 
    text-align: center; 
    height: 50px; 
} 

#menu ul li { 
    display: inline; 
    text-align: center; 
} 

#menu ul li a { 
    text-decoration: none; 
    display: inline-block; 
    width: 200px; 
    height: 100%; 
    background: RoyalBlue; 
    vertical-align: middle; 
} 

Answer 1

我們可以使用:before，以幫助對齊。

html, body, div, span, applet, object, iframe, 
 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
 
a, abbr, acronym, address, big, cite, code, 
 
del, dfn, em, img, ins, kbd, q, s, samp, 
 
small, strike, strong, sub, sup, tt, var, 
 
b, u, i, center, 
 
dl, dt, dd, ol, ul, li, 
 
fieldset, form, label, legend, 
 
table, caption, tbody, tfoot, thead, tr, th, td, 
 
article, aside, canvas, details, embed, 
 
figure, figcaption, footer, header, hgroup, 
 
menu, nav, output, ruby, section, summary, 
 
time, mark, audio, video { 
 
    margin:0; 
 
    padding:0; 
 
    border:0; 
 
    outline:0; 
 
    font-size:100%; 
 
    font: inherit; 
 
    vertical-align:baseline; 
 
    background:transparent; 
 
} 
 

 

 
html {font-size:62.5%} 
 
body {font-size: 16px; max-width: 1000px; margin: auto; line-height: 1.618;} 
 
#menu {background: CornflowerBlue; 
 
    position: relative; 
 
    width: 100%; 
 
    padding-bottom: 5.6%; /* defining our 1000px : 56px ratio of the menubar */;} 
 

 
#menu ul { 
 
    position: absolute; right: 0; left: 0; top: 0; bottom: 0; /* This additional container is needed to not add the content to the padding-trick for our aspect ratio. */ 
 
    list-style-type: none; 
 
    text-align: center; 
 
} 
 

 
#menu ul li { 
 
    position: relative; 
 
    display: inline; 
 
    text-align: center; 
 
} 
 

 
#menu ul li a { 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    width: 20%; 
 
    height: 100%; 
 
    background: RoyalBlue; 
 
} 
 
#menu ul li a:before{ 
 
    height: 100%; 
 
width: 1px; 
 
display: inline-block; 
 
content: ''; 
 
vertical-align: middle; 
 
}

<div id="menu"> 
 
    <ul> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">Menu Item</a></li> 
 
     <li><a href="#">Categories</a></li> 
 
     <li><a href="#">Contact</a></li> 
 
    </ul> 
 
    </div>

Answer 2

使用line-height：

#menu {background: CornflowerBlue; 
    width: 100%;} 

#menu ul { 
    list-style-type: none; 
    text-align: center; 
    height: 50px; 
} 

#menu ul li { 
    display: inline-block; 
    text-align: center; 
} 

#menu ul li a { 
    text-decoration: none; 
    display:block; 
    width: 200px; 
    background: RoyalBlue; 
    line-height: 50px; 
} 

演示：JSFiddle

Answer 3

主要的變化是設置線高度爲t元素的高度，在這種情況下爲50px。

此外，您可以將一些屬性移動到鏈接。通過這樣做，ul和li大小與鏈接，你不需要重複這些屬性：

#menu { 
 
    background: CornflowerBlue; 
 
} 
 
#menu ul { 
 
    list-style-type: none; 
 
    text-align: center; 
 
} 
 
#menu ul li { 
 
    display: inline-block; 
 
} 
 
#menu ul li a { 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    width: 200px; 
 
    background: RoyalBlue; 
 
    line-height: 50px; 
 
}

<div id="menu"> 
 
    <ul> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">Menu Item</a></li> 
 
    <li><a href="#">Categories</a></li> 
 
    <li><a href="#">Contact</a></li> 
 
    </ul> 
 
</div>