Question

我在垂直对齐方面遇到了一些问题。我想将<span>›</span>元素集中在垂直方向。 http://jsfiddle.net/vpVEf/

有没有办法在此示例中自动将其集中为“li a”？请注意，a元素是集中的，不使用行高。 http://jsfiddle.net/vpVEf/9/

Answer 1

尝试使用line-height调整跨度上的垂直对齐方式：

#MenuEventos li span{
    position: relative;
    float: right;
    font-size: 3.5em;
    color: white;
    font-family: serif;
    font-weight: bold;
    margin: auto 0px auto 0px;
    line-height: 44px; /* Adjust this as needed */
}

示例：http://jsfiddle.net/vpVEf/1/

Answer 2

发生这种情况的原因是因为a标记有一个填充，将其中的所有内容按下12px。

删除顶部/底部填充并使用line-height使其68px高。

padding: 0 12px;
line-height: 68px;

它可能看起来不像，但确实解决了问题。从span删除所有格式以查看！但现在的问题是文本在跨度内没有对齐中心。您可以使用line-height上的span进行调整。

line-height: 55px;

似乎运作良好。

DEMO

Answer 3

以line-height: 2.8em;样式获取#MenuEventos li a并将其移至#MenuEventos li样式。

请参阅此jfiddle：http://jsfiddle.net/zFnJb/

Answer 4

您需要向左浮动<a>元素，向右浮动<span>元素。

span元素的垂直对齐

4 个答案: