css - 在导航栏中将 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;then just give none to bottom，border-bottom:none;而不是声明所有边。

• 如果您希望 BG 同时重复 X 和 Y，则background-repeatis repeatonly，not repeat-x-y。

• 对于vertical-align，没有center。它是top、middle和。但它仅适用于与其他内联元素有关的内联元素或元素（它将像 td 的属性一样工作）。bottombaselinedisplay:table-cellvalign="middle"

Answer 2

尝试这个：

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