图像和文本的 CSS 对齐问题

Question

我在让我的图标与文本对齐时遇到问题，尝试了我能想到的所有组合，仍然在顶部对齐

http://jsfiddle.net/gkC32/1/

有什么帮助会很好吗？

Answer 1

您是否尝试过在 img 元素上设置 vertical-align 属性？

.bluebutton img {
    vertical-align: middle;
}

或者，由于您将图像纯粹用作装饰，您可能希望使用 background-image 来设置图标:

.bluebutton {
    background: #336699 url('http://cdn1.iconfinder.com/data/icons/fatcow/16x16_0460/group_add.png') no-repeat 10px center;
    padding: 3px 10px 4px 28px;
}

参见:http://jsfiddle.net/gkC32/8/