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

Question

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

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; 添加到 anchor (与 LI 的高度相同) .

这是 fiddle :http://jsfiddle.net/vMLpL/

---

顺便给你提示:

• 对于边框，您可以使用 border:1px solid #f0f0f0; 然后只给底部 none，比如 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" 属性一样工作)。