0

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

在这个例子中,有没有办法将它自动​​集中为“li a”?请注意, a 元素是集中的,而不使用 line-height。 http://jsfiddle.net/vpVEf/9/

4

4 回答 4

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/

于 2012-06-20T15:20:32.740 回答
1

发生这种情况的原因是a标签有一个填充,将其中的所有内容下推 12 像素。

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

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

它可能看起来不像,但这确实解决了问题。删除所有格式span以查看!但现在的问题是文本未在跨度内居中对齐。您也可以使用line-heightspan调整它。

line-height: 55px;

似乎运作良好。

演示

于 2012-06-20T15:22:27.447 回答
0

拿走line-height: 2.8em;你的#MenuEventos li a风格并将其移动到 #MenuEventos li风格中。

看到这个 jfiddle:http: //jsfiddle.net/zFnJb/

于 2012-06-20T15:27:09.760 回答
-1

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

于 2012-06-20T15:17:50.837 回答