縱向居中內聯內容使用行高

Question

我試圖垂直居中一些文字，除了兩個圖像鏈接。我以前做過幾十次，但由於某種原因，現在它不能正常工作。

下面的代碼：http://jsfiddle.net/KRWNw/

<style type="text/css"> 
#social-icons { 
    height:32px; 
    line-height:32px; 
}​ 
</style> 

<div id="social-icons"> 
    Connect: 
    <a href="#"> 
     <img src="http://mydomain.com/rodi/images/facebook.png" width="32" height="32" /> 
    </a> 
    <a href="#"> 
     <img src="http://mydomain.com/rodi/images/youtube.png" width="32" height="32" /> 
    </a> 
</div>​ 

如果我所拍攝的圖像進行文本對齊完美，但在它的圖像將無法對齊。

我在做什麼錯？

謝謝！

Answer 1

img{ 
vertical-align:middle; 
} 

使用此css。

DEMO

Answer 2

有一件事是缺少的是vertical-align: middle;，只會讓你的一半。另一個問題是你的內聯圖像。如果你向左或向右移動圖像float，它會正確對齊。

http://jsfiddle.net/tU4x7/

圖像留在這個例子中的內容，但如果你在一個跨度包裹它，你可以浮動文字以及。還有其他的解決方案來實現同樣的事情。

Answer 3

img{vertical-align:middle;} 

但我不會用這樣的，因爲圖標是不是你的頁面或內容的真實部分。考慮將img用作背景圖片。 這裏有個很棒的CSS framework