css - 具有可变高度的菜单中的链接垂直居中

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>