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

我有一个菜单和一个CSS，如下所示，也可以在上面玩

我需要对菜单项进行垂直对齐，并尝试了在li和a上使用垂直对齐：中间和不同的显示：设置的所有方法（因为它在线工作于内联元素），但我无法让它工作

有人知道如何做到这一点吗

编辑：这只是一个简化的场景，我认为已经足够了，但事实并非如此，所以这里是我的完整场景：（见我对GolezTrol答案的评论中的简短描述）

#菜单{背景：矢车菊蓝；
宽度：100%；}
#菜单ul{
列表样式类型：无；
文本对齐：居中；
高度：50px；
} 
#菜单ulli{
显示：内联；
文本对齐：居中；
}
#菜单ulli a{
文字装饰：无；
显示：内联块；
宽度：200px；
身高：100%；
背景：皇家蓝；
垂直对齐：中间对齐；
}

使用

行高

：

#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;
}

---

演示：

主要更改是将行高度设置为元素的高度，在本例中设置为50px

此外，您可以将某些属性移动到链接。通过这样做，

ul

和

li

的大小与链接一致，您无需复制这些属性：

#菜单{
背景：矢车菊蓝；
}
#菜单ul{
列表样式类型：无；
文本对齐：居中；
}
#菜单ulli{
显示：内联块；
}
#菜单ulli a{
文字装饰：无；
显示：内联块；
宽度：200px；
背景：皇家蓝；
线高：50px；
}

我们可以使用

：before

来帮助对齐

html，body，div，span，applet，object，iframe，
h1、h2、h3、h4、h5、h6、p、块报价、预，
a、 缩写，首字母缩写，地址，大，引用，代码，
del、dfn、em、img、ins、kbd、q、s、samp、，
小、走向、强、次、辅助、tt、var、，
b、 u，i，中心，
dl，dt，dd，ol，ul，li，
字段集、表单、标签、图例、，
表格、标题、正文、tfoot、THAD、tr、th、td、，
文章、旁白、画布、细节、嵌入、，
图，figcaption，页脚，页眉，H组，
菜单、导航、输出、ruby、节、摘要、，
时间、标记、音频、视频{
保证金：0；
填充：0；
边界：0；
大纲：0；
字体大小：100%；
字体：继承；
垂直对齐：基线；
背景：透明；
}
html{字体大小：62.5%}
正文{字体大小：16px；最大宽度：1000px；边距：自动；行高：1.618；}
#菜单{背景：矢车菊蓝；
位置：相对位置；
宽度：100%；
填充底部：5.6%；/*定义菜单栏的1000px:56px比率*/；}
#菜单ul{
位置：绝对；右：0；左：0；顶部：0；底部：0；/*需要这个额外的容器，以便不将内容添加到纵横比的填充技巧中*/
列表样式类型：无；
文本对齐：居中；
} 
#菜单ulli{
位置：相对位置；
显示：内联；
文本对齐：居中；
}
#菜单ulli a{
文字装饰：无；
显示：内联块；
宽度：20%；
身高：100%；
背景：皇家蓝；
}
#菜单ulli a：之前{
身高：100%；
宽度：1px；
显示：内联块；
内容：''；
垂直对齐：中间对齐；
}

谢谢你的回答，它非常适合我在这里描述的内容。事实上，我需要的是更复杂的，我想让我的问题保持简单，但我现在明白了，我需要把整个故事。我将要创建一个流畅的布局，其中菜单栏以及其他元素必须在每个屏幕大小下保持一定的宽度与高度比例。我使用填充底部的技巧来实现这一点，调整浏览器大小以查看行为。现在我只需要得到块中心的文本。对这种情况有什么想法吗？我想给你投票，但我还没有15票。谢谢你，你的回答完美地回答了我最初的简化问题。天哪，这很好，完美地解决了我的问题。谢谢，我不希望这种罕见的情况会找到一个完全自动化的解决方案。谢谢。我无法投票，因为我还没有声誉。改天我还会回来：）也要感谢你，你的答案是Golez Trol最基本的答案，他甚至改进了代码。

#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;
}