Css 在导航栏中的li元素中居中放置超链接

我想在文本居中的位置创建一个导航栏，但我的CSS代码将超链接放置在li的上角，如图所示

CSS:

HTML:

垂直居中有多种方法

如果您知道链接的单词，并且知道它们不会有换行符，您可以添加

行高：51px到锚（与LI的高度相同）

这是小提琴：


顺便说一句，给你的建议是：


对于边框，可以使用
border:1px solid#f0然后只给底部一个，就像
边框底部：无而不是声明所有方面

当您希望BG同时重复X和Y时，
background repeat
仅为
repeat
，而不是
repeat-X-Y

对于
垂直对齐
，没有
中心
。它是
顶部
，
中部
，
底部
和
基线
。但是它只适用于内联元素，相对于其他内联元素，除了或适用于
display:table cell
元素（其工作原理类似于td的
valign=“middle”
atribute）

试试这个：

从“li”选择器中删除以下内容：

高度：51px


将以下内容添加到“li”选择器：

文本对齐：居中

行高：51px


也请发布你的HTML。你想要文本水平居中，垂直居中，还是两者都居中？我添加了HTML，我想要它水平居中，垂直居中。非常感谢。
#navigation {
    clear: both;
    margin: 0 auto 5px;
    margin-top: 0;
    height: 6%;
    padding: 0 5px;
    position: relative;
    z-index: 1;
}

#navigation  a {
    height: 10%;
    width: 50px;
    color: red;
    vertical-align: center;
    text-align: center;
    text-decoration: bold;
}

li {
    border-top: solid;
    border-right: solid;
    border-left: solid;
    border-bottom: none;
    padding-left: 1px;
    height: 51px;
    width: 18%;
    background-image: url('../images/tab-selected.png');
    background-repeat: repeat-x-y;
    border-color: #F0F0F0;
    display: inline-block;
    padding-left: 1px;
}

<nav id="navigation">
  <ul>
    <li ><a href="overview.asp">overview</a></li>
    <li ><a href="overview.asp">overview</a></li>
 </ul>  
</nav>