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

Question

我有一个菜单和一个 CSS，如下所示，也可以在 http://codepen.io/Sofian777/pen/PqeyQa 上玩

我需要垂直对齐菜单项并尝试使用 vertical-align:middle 和 different display: 设置 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>