上

Question

線

，便無法垂直中心的形象在這裏是一個小提琴： http://jsfiddle.net/sAuhsoj/zSGLy/3/

我想要垂直居中圖像在我的鏈接。該鏈接有一個固定的height屬性，並且line-height設置爲與此相同。我試圖通過設置：vertical-align: middle;來垂直居中圖像，這是我之前使用的一種技術，但不一定用於此確切目的，但是圖像太低。我不明白爲什麼會發生這種情況。我刪除了所有無關的CSS屬性，雖然我可能會產生效果，但正如您所看到的，即使所有不相關的屬性都被刪除，圖像也不會移動到中心。如果將錨點元素的height和line-height設置爲20px（與圖像高度相同）並且圖像在鏈接底部突出（請參閱http://jsfiddle.net/sAuhsoj/zSGLy/4/），則可以更好地看到此問題。

我可以做些什麼來垂直居中這個鏈接的圖像？

Answer 1

由@udidu提供的答案適用於你的情況。但是，您必須注意，圖片不居中的主要原因是由於應用於您的<a>.link的css屬性line-height。從你的代碼示例這裏http://jsfiddle.net/zSGLy/6/

，你是否應該由事故中，有任何繼承不同的CSS屬性line-height，設置vertical-align:-5px將需要重新檢查，該解決方案重新調整，每一次。

有解決這個問題的幾種方法：

第1種方法

如果你真的需要的圖像，你必須通過設置要稍微有點hackish它以這種方式垂直定位。如果我不需要，這是我不喜歡使用的一種方法，因爲您需要在組合中使用另一個<span>元素。

line-height: 1;很重要。這裏的小提琴http://jsfiddle.net/zSGLy/8/

HTML：

<a href="javascript:void(0)" class="link"> 
    <span><img src="http://energenius.co.uk/dash/img/settingsIcon.png" /></span> 
</a> 

CSS：

.link { 
    display: inline-table; 
    background-color: red; 
    height: 30px; 

    /* just to make the problem more obvious */ 
    width: 100px; 
    text-align: center; 
    line-height: 30px; 
} 

.link > span { 
    height: 100%; 
    display: table-cell; 
    vertical-align: middle; 
    line-height: 1; 
} 

第2種方法

在分離演示內容（什麼是樣式表）的概念，更好的方法是將圖像設置爲背景圖像。

這裏舉例：http://jsfiddle.net/zSGLy/9/

CSS：

.link { 
    display: inline-block; 
    background-color: red; 
    height: 30px; 

    /* just to make the problem more obvious */ 
    width: 100px; 
    text-align: center; 

    /* bg image*/ 
    background-image: url(http://energenius.co.uk/dash/img/settingsIcon.png); 
    background-repeat: no-repeat; 
    background-position: center center; 
} 

HTML：

<a href="javascript:void(0)" class="link"></a>​ 

希望它能幫助。

Answer 2

嘗試

vertical-align: -5px; 

下面是結果：

http://jsfiddle.net/zSGLy/5/