Css anchor won'；t在列表项内垂直居中

我试图在列表中水平和垂直地将锚定居中

#menu li a {
    display: inline-block;
    width: 100%;
    height: 40px;
    padding: 12px 0 12px 0;
    text-decoration: none;
    color: #AAAAAA;
    font-size: 40px;
    text-shadow:
        -2px -2px 0 #000,    
        2px -2px 0 #000,
        -2px 2px 0 #000,
        2px 2px 0 #000;
}

我想要的只是一个锚：

• 是水平和垂直居中的
• 拉伸整个父对象

编辑：

文本对齐

工作正常，但垂直对齐：中间对齐工作不正常

编辑2：根据建议，我现在使用的

线高度

等于锚的高度。这确实使锚点更接近其垂直中心，但出于某种原因，它仍然离其真正的垂直中心有几个像素。这是最新的提琴。。。

编辑3：出于好奇，我为锚元素定义了一个1px的实心边框，发现锚元素内部的文本没有垂直居中。因此，像

垂直对齐

这样的事情，甚至对锚点的位置更改都不会影响这方面的任何内容。

---

有人能解释一下这种奇怪的行为吗

如前所述，您的标记无效。修复后，可以通过执行以下类似操作将锚定标记居中：

将宽度和文本对齐方式设置为锚定的父对象，而不是锚定本身

li {
  text-align: center;
  width: 100%;
}

要垂直对齐图元，可以采取不同的方法。最简单的方法可能是为元素指定相同的高度和线条高度。这样它将垂直居中文本

<div class="parent-element">
  <div class="child-element">
    <p>This is some text.</p>
  </div>
</div>

.parent-element {
  width: 100%;
}

.child-element {
  height: 100px;
  line-height: 100px;
}

这是一些文本

.父元素{
宽度：100%；
}
.子元素{
高度：100px；
线高：100px；
}

也可以将其放置在距顶部50%的位置，然后减去子图元高度的一半

<div class="parent-element">
  <div class="child-element">
    <p>This is some text.</p>
  </div>
</div>

.parent-element { position: relative; }
.child-element {
  height: 100px;
  margin-top: -50px;
  position: absolute;
  top: 50%;
}

这是一些文本

.parent元素{位置：相对；}
.子元素{
高度：100px；
利润上限：-50px；
位置：绝对位置；
最高：50%；
}

---

应该这样做

首先，您的HTML格式无效。一个

的孩子只能有一个

。指出这一点的真实性，已修复。然而，这与我现在的问题并没有太大关系…“文本对齐”只影响水平对齐，对吗？我在垂直对齐方面遇到问题。哦，对不起，我没有意识到您正在尝试垂直对齐元素。我会更新我的答案来解释垂直对齐。谢谢你更新你的答案-根本没有想到线的高度。这确实使它更好，但出于某种原因，它仍然像垂直中心的2px。我现在就到此为止，但我真的不明白这里发生了什么。我从来没有遇到过简单地正确对齐元素的问题。也许这与我在这里使用列表或其他东西有关……不知道。谢谢你的帮助！我对我的问题进行了编辑，以使其更加清晰-我在垂直居中链接时遇到问题。“垂直对齐：中间”似乎也不起作用。。。

text-align:center;