有圖標出現在中間完美

Question

我想讓圖像出現在文字的中間...現在圖標稍微高一點。

我試着使用：

vertical-align:middle; 

但它使人們出現低則文本。有沒有什麼辦法讓它出現在中間，而無需使用margin或padding

HTML：

<div class="text">Text: </div> 
<div id="icon"><img src="http://i60.tinypic.com/35i3ltu.png" height="30" width="30" /></div> 

CSS：

.text{ 
    color:#fff; 
    display:inline-block; 
    text-shadow: 5px 5px 5px #6699ff; 
    font-size:2.3em; 
    font-weight: bold; 
    font-family: avenir; 
} 
#icon{ 
    display:inline-block; 
} 

JSFiddle Demo

Answer 1

JS Fiddle

這個應該把它變爲符合其下面去，然後你會看到它垂直排列

例如，我已經表明在撥弄y

#icon { 
    display:inline-block; 
    height: 30px; 
    vertical-align: middle; 
} 

如果你有字母像 y文本

，您還可以在div中添加圖片和添加vertical-align:middle將對齊

JS Fiddle