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实线边框，并看到INSIDE锚本身的文本没有垂直居中。因此，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;

应该这样做。

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

2 个答案: