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;}

问题在于，默认情况下，图像具有 vertical-align:baseline，即它们的底部与文本的基线对齐。有了这个，它们的中心与文本的中心对齐。另见 http://www.w3.org/wiki/CSS/Properties/vertical-align

css align text with icon with