对齐<a> inside a <li></li></a>

Question

我正在尝试将<a>标记与<li>对齐，但我可以将其标记为verticaly。但是<a>总是位于顶部，而我想以verticaly和horizo​​ntaly为中心 <a>标记

如何看待图片。 我需要A.但是获得B

这是HTML

<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<ul>​

这就是CSS

ul {
    line-height: 85px;
}

li {
    float: left;
    height: 85px;
    line-height: 85px;
    border: 1px solid red;
}

a {
    height: 40px;
    line-height: 40px;
    width: 40px;
    display: block;
    text-align: center;
    border: 1px solid blue;
}

你可以看到jsfiddle

http://jsfiddle.net/Mum5e/

Answer 1

您可以尝试使用此网站的方法：http://phrogz.net/css/vertical-align/index.html

我把一个快速小提琴放在一起显示：http://jsfiddle.net/Mum5e/1/

基本上，通过使用绝对定位，顶部指向相对定位元素内的中间标记（50％），我们可以将其置于中心位置。但是，由于我们想要链接的中心，而不是链接的顶部，在50％标记处，我们更改链接的上边距以将其偏移一半的高度。

注意：通过将链接更改为绝对，我们必须为li提供宽度，因为a将不再强制li获取其宽度。

的CSS：

ul {
    line-height: 85px;
}

li {
    float: left;
    height: 85px;
    width: 40px;
    line-height: 85px;
    border: 1px solid red;
    position: relative;
}

a {
    position: absolute;
    top: 50%;
    margin-top: -20px;
    height: 40px;
    line-height: 40px;
    width: 40px;
    display: block;
    text-align: center;
    border: 1px solid blue;
}

Answer 2

您可以尝试使用display:table-cell和vertical-align:middle。我记得，这是一个跨浏览器解决方案。

请参阅此Fiddle

带有固定宽度锚点的

编辑：Fiddle

Answer 3

一个解决方案是给它一个21px的上边距（容器的高度，减去元素的框高度（在这种情况下为边框+高度）除以2）。

另一个解决方案是给它一个85px的高度和行高，有效地使文本居中，但使元素更高。

在一天结束时，我可能会选择rdiazv的解决方案，主要是因为它是最简单和最容易维护的。

Answer 4

嗯，我玩了一下，这对我有用：

a {
height: 40px;
width: 40px;
margin-top:22.5px;
    border: 1px solid blue;
text-decoration:none;
 }