html - 在 a 内对齐

Question

我正在尝试在<a>内部对齐标签，<li>但我可以垂直对齐。但是<a>总是在顶部，我想将<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/

score 3 · Accepted Answer

您可以从该站点尝试一种方法：http: //phrogz.net/css/vertical-align/index.html

我整理了一个快速的小提琴来展示这个：http: //jsfiddle.net/Mum5e/1/

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

注意：通过将链接更改为绝对，我们必须给lia 宽度，因为a将不再强制ali采用它的宽度。

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;
}

score 3 · Accepted Answer

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

看到这个小提琴

编辑：固定宽度的锚点：小提琴

score 0 · Accepted Answer

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

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

归根结底，我可能会选择 rdiazv 的解决方案，主要是因为它最简单、最容易维护。

score 0 · Accepted Answer

好吧，我玩了一下，这对我有用：

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

html - 在 a 内对齐

4 回答 4

Related

Reference