将导航栏中li元素内的超链接居中

Question

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

CSS：

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

HTML：

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

Answer 1

有多种垂直居中的方式。

如果您知道链接的字词并知道它们没有换行符，您可以将line-height:51px;添加到锚点（与LI的高度相同）。

这是小提琴：http://jsfiddle.net/vMLpL/

---

顺便提一下，给你的提示：

• 对于边框，您可以使用border:1px solid #f0f0f0;，然后只提供无底线，例如border-bottom:none;，而不是声明所有方面。

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

• 对于vertical-align，没有center。它是top，middle，bottom和baseline。但它仅适用于内联元素，除了display:table-cell元素之外的其他内联元素（它将像td的valign="middle"属性一样工作）。

Answer 2

试试这个：

1. 从“li”选择器中删除以下内容：
   • height: 51px;
2. 将以下内容添加到“li”选择器：
   • text-align: center;
   • line-height: 51px;