CSS垂直對齊圖像內的文本按鈕

Im在垂直對齊圖像按鈕內的文本時遇到問題。垂直對齊：中間不似乎工作。CSS垂直對齊圖像內的文本按鈕

這裏我得到了什麼至今：

#navbar ul { 
    padding-top: 10px; 
    float:left; 
} 

#navbar li {  
    background-image:url("../images/btns.png"); 
    width: 78px; 
    height:32px; 
    float:left; 
    text-align: center; 
    font-size: 12px; 
    list-style:none; 
    vertical-align: middle; 
}

來源

2013-04-26 Dynamiite

最簡單的方式就是給了li相同自己的高度的line-height。

http://jsfiddle.net/KHBG4/

#navbar ul { 
    padding-top: 10px; 
    float:left; 
} 
#navbar li { 
    background-image:url("http://placehold.it/78x32"); 
    float:left; 
    width: 78px; 
    height:32px; 
    text-align: center; 
    font-size: 12px; 
    list-style:none; 
    line-height:32px; 
}

來源

2013-04-26 19:32:42 PSL

沒有考慮行高。這可能是一個好方法 – VoidKing 2013-04-26 19:33:13

嗯..是的，大多數情況下，像這個行高可能是一個快速修復。 – PSL 2013-04-26 19:34:19

行高解決了它。謝謝 – Dynamiite 2013-04-26 19:36:16

我建議給予你的按鈕padding-top（並減少它被這個數字當然的高度）最簡單的路線。

它並不是真正的「以自動爲中心」，因爲如果您在不更新填充的情況下更改高度，它將不會居中，但是 - 它的工作原理簡單且易於更新。

來源

2013-04-26 19:28:50 Dave

可以在不同的瀏覽器/屏幕分辨率看起來不同，雖然，對不對？ – VoidKing 2013-04-26 19:29:30

@VoidKing - 它不應該 - 我一直使用這種方法，並從來沒有任何跨瀏覽器顯示問題。 – Dave 2013-04-26 19:30:21

好吧，我想這隻取決於你如何設置 – VoidKing 2013-04-26 19:30:44

vertical-align只能與內聯元素一起使用。我已經說過，我知道img標籤是「內嵌塊」，所以不太確定那裏會發生什麼，但我不認爲你的意思是垂直對齊img，而是文本，所以你需要一個單獨的內聯標籤（跨度會很好），並使用「位置」和「垂直對齊」來設置它的權利。

我最近有一篇關於那非常問題在這裏：解決這個問題

How can I resize a background-image to fit my element (without set width) in CSS 2?

來源

2013-04-26 19:30:22 VoidKing

這是因爲我的圖像是在css – Dynamiite 2013-04-26 19:34:00

@Sebastian Yup中指定的，請檢查我的帖子，我是按照和你一樣的方式進行的。其中的答案也尊重IE 8，萬一這是一個問題:) – VoidKing 2013-04-26 19:34:57

CSS垂直對齊圖像內的文本按鈕

回答

相關問題