跨度元件的垂直對齊

我遇到垂直對齊時出現的一些問題。我想把我的<span>›</span>元素集中在垂直。 http://jsfiddle.net/vpVEf/跨度元件的垂直對齊

有沒有辦法在本例中自動將它集中爲「li a」？請注意，a元素不使用行高而被集中。 http://jsfiddle.net/vpVEf/9/

2012-06-20 Ronaldo

大家好。我仍然對這個問題有疑問。有沒有辦法像這個例子中的「li a」一樣自動集中它？請注意，a元素不使用行高而被集中。 http://jsfiddle.net/vpVEf/9/ – Ronaldo

出現這種情況的原因是因爲a標籤具有填充，下推一切它由12px。

刪除頂部/底部填充並使用line-height使其高度爲68px。

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

它可能看起來不像，但是，這個確實解決問題。從span中刪除所有格式以查看！但現在的問題是文本沒有在範圍內對齊。您也可以在span上使用line-height來調整。

line-height: 55px;

似乎很好。

DEMO

來源

2012-06-20 15:22:27 sachleen

大家好。我仍然對這個問題有疑問。有沒有辦法像這個例子中的「li a」一樣自動集中它？請注意，a元素不使用行高而被集中。 jsfiddle.net/vpVEf/9 – Ronaldo

不，不是。你在'li'上有'line-height'。雖然'span'是浮動的，所以它不會受到影響。 – sachleen

-1

您需要將<a>元素左移，<span>元素右移。

來源

2012-06-20 15:17:50

-1這是行不通的。 – sachleen

嘗試使用的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-20 15:20:32 sbeliv01

有沒有辦法在本例中自動將其集中爲「li a」？請注意，a元素不使用行高而被集中。 http://jsfiddle.net/vpVEf/9/ – Ronaldo

就拿你有line-height: 2.8em;在#MenuEventos li a風格，並將其移動到#MenuEventos li風格。

看到這個jfiddle：http://jsfiddle.net/zFnJb/

來源

2012-06-20 15:27:09 redlena

跨度元件的垂直對齊

回答

相關問題