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

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

使用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 2

主要变化是将行高设置为元素的高度，因此在本例中为 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>

Answer 3

我们可以使用 :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>

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

Vertical centering of links in a menu with variable height

css

vertical-alignment