使用CSS在<a>元素中垂直对齐文本

Question

有人能解释一下如何在<a>元素中垂直对齐文本-使得两个文本都出现在红色框的中间吗？

http://jsfiddle.net/WeKtX/

这是我的HTML：

<ul>
<li><a href="#">this is a link</a></li>
<li><a href="#">this is an even longer link</a></li>
</ul>

还有我的CSS：

li {list-style-type:none;margin:0;padding:0}
li a {width:100px;float:left;background:red;margin-right:20px;height:40px}

非常感谢任何指点

- michaelmcgurk

Answer 1

如果您想让文字水平居中，请尝试：

text-align: center;

如果您想将文本垂直居中，则可以尝试：

line-height: 40px; //Where 40px is the height of your parent element

请记住，使用行高时仅适用于单行文本。如果您想要多行文本，则需要为文本指定高度，然后在文本上使用position: absolute;，在父元素上使用position: relative;。

对于多行示例，您可以尝试以下 jsFiddle：

li {
    list-style-type:none;
    margin:0;
    padding:0;
    position: relative;
    height: 60px;
    width: 200px;
    display: block;
    background:red;
}

li a {
    width:100px;
    height:40px;
    position: absolute;
    top: 50%;
    margin-top: -20px;
}

- cereallarceny

---

好的答案。我想我会使用一个类来忽略多行文本中的 line-height。 - michaelmcgurk

我是否能帮助@michaelmcgurk？如果是这样，请标记我的答案为正确，以便将来帮助其他人！ - cereallarceny

嘿嘿，我还在我的端上工作 - 看起来已经解决了问题。再等几分钟吧;-) 再次感谢。 - michaelmcgurk

完全没问题，很高兴能帮到你！如果你还有其他疑问，请告诉我。 - cereallarceny