中心垂直对齐<a> inside <ul><li></li></ul></a>

Question

与标题一样，我想在<a>内垂直对齐<ul><li>中心。这里是jsfiddle

Answer 1

更改a的行高以匹配li的行高。

a {
    /*...preceding styles */
    line-height: 3em; /* Elements line-height set to match parents */
    height: 2em;
    width: 5em;     
    text-align: center;
}

或

在vertical-align:middle上设置属性a。

a{
   /*...Other styles ommitted*/
   vertical-align: middle;
}

示例 http://jsfiddle.net/gvTLw/5/

Answer 2

由于您要在两个元素上指定高度，因此可以通过将margin-top: 0.5em添加到a来轻松实现。

Like This

这是因为li的高度为3em，a的高度为2em，因此顶部需要半个em才能看到垂直居中

Answer 3

您需要更改a元素的高度和行高，以匹配li的高度：

li {
    height: 3em;
}

a {
    line-height: 3em;
    height: 3em;
}

Answer 4

类似于Kevin的回复，将锚点上的行高设置为inherit将执行相同的操作，而无需手动匹配值

Fiddle