html - 让图标完美地出现在中间

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 这样的字母在下面，那么它应该可以与文本对齐，然后你会看到它垂直对齐

例如，我在 fiddle 中展示了 y

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

您还可以在 div 中添加图像并添加 vertical-align:middle 将其对齐

JS Fiddle