我在垂直对齐方面遇到了一些问题。我想把我的<span>›</span>
元素垂直集中。
http://jsfiddle.net/vpVEf/
在这个例子中,有没有办法将它自动集中为“li a”?请注意, a 元素是集中的,而不使用 line-height。 http://jsfiddle.net/vpVEf/9/
我在垂直对齐方面遇到了一些问题。我想把我的<span>›</span>
元素垂直集中。
http://jsfiddle.net/vpVEf/
在这个例子中,有没有办法将它自动集中为“li a”?请注意, a 元素是集中的,而不使用 line-height。 http://jsfiddle.net/vpVEf/9/
尝试使用 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/
发生这种情况的原因是a
标签有一个填充,将其中的所有内容下推 12 像素。
移除顶部/底部填充物并使用line-height
使其变68px
高。
padding: 0 12px;
line-height: 68px;
它可能看起来不像,但这确实解决了问题。删除所有格式span
以查看!但现在的问题是文本未在跨度内居中对齐。您也可以使用line-height
来span
调整它。
line-height: 55px;
似乎运作良好。
拿走line-height: 2.8em;
你的#MenuEventos li a
风格并将其移动到 #MenuEventos li
风格中。
看到这个 jfiddle:http: //jsfiddle.net/zFnJb/
您需要使<a>
元素向左浮动和<span>
元素向右浮动。