锚点不会在列表项内垂直居中

Question

我正在尝试在列表中水平和垂直居中锚点。

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

http://jsfiddle.net/9FEDC/2/

我想要的只是一个锚：

• 水平和垂直居中
• 延伸到整个父级

编辑：text-align 工作正常，但甚至 vertical-align: middle 都没有工作。

编辑 2：按照建议，我现在使用的 line-height 等于锚的高度。这确实使锚点更接近其垂直中心，但由于某种原因，它仍然离其真正的垂直中心有几个像素。这是一个更新的小提琴...... http://jsfiddle.net/zp5GM/1/

编辑 3：出于好奇，我为锚元素定义了一个 1px 实心边框，并看到锚本身内部的文本没有垂直居中。所以像vertical-align 这样的事情，甚至是锚的位置变化都不会在这方面影响任何事情。 有人可以解释一下这种奇怪的行为吗？

Answer 1

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

将宽度和文本对齐设置为锚的父级而不是锚本身。

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

您也可以将其定位在距顶部 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%;
}

Answer 2

text-align:center;

应该这样做。