有图标完美出现在中间

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这样的字母，那么你应该会看到它已经垂直对齐

例如，我已经在小提琴中展示了y

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

您还可以在div中添加图片，添加vertical-align:middle会对齐

JS Fiddle