css将文本与图标对齐

Question

我想将图标与文字对齐，查看如下截图：

这里的html来源：

<a class="download" href="#">'.$dicon.'Download : ca dmv driving performance evaluation score sheet PDF</a>

此处$dicon来源：

$dicon = '<img src="icon.png" width="25">';

这里的css来源：

.download{
        display:block;
        font-family:opensansitalic;
        text-transform: uppercase;
        vertical-align:baseline;
    }

结果：

我的代码是错误的还是无论如何修复它都会有所帮助。

Answer 1

好吧，我想你想要这样的东西？

如果是这样，您只需要vertical-align img到中间。

.download img {vertical-align:middle;}

JSFiddle

问题在于，默认情况下，图像具有vertical-align：baseline，也就是说，它们的底部与文本的基线相对应。通过这个，它们与中心对齐到文本的中心。另请参阅http://www.w3.org/wiki/CSS/Properties/vertical-align