CSS对齐问题与图像和文本

Question

我无法让我的图标与文字对齐，尝试了我能想到的每一个组合，仍然在顶部对齐

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

任何帮助都会很棒？

Answer 1

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

.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/

Answer 2

我认为这是把它扔出去的形象。添加如下内容：

.bluebutton img {
    vertical-align:middle;
}

应该做的伎俩。如果您也以不同方式进行排列，则可以进一步改善对齐方式。例如http://jsfiddle.net/gkC32/32/