垂直居中

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>