0

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

4

4 回答 4

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/

于 2013-04-17T09:11:34.973 回答
1

由于您在两个元素上都指定了高度，因此可以通过添加margin-top: 0.5em到a.

像这样

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

于 2013-04-17T09:12:10.217 回答
0

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

li {
    height: 3em;
}

a {
    line-height: 3em;
    height: 3em;
}
于 2013-04-17T09:14:02.747 回答
0

与 Kevin 的响应类似，将锚点上的 line-height 设置为inherit将做同样的事情，而无需手动匹配该值

小提琴

于 2013-04-17T09:15:24.303 回答