使用 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}

非常感谢您的任何指点

Answer 1

如果您想将文本水平居中，请尝试：

text-align: center;

如果你想让文本垂直居中，那么试试：

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

请记住，当使用 line-height 时，它只适用于 一行 文本。如果你想做多行文本，恐怕你必须指定文本的高度，然后在文本上使用position: absolute;，在父元素上使用position: relative;。

对于您的多行示例，我会尝试the following 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;
}