css 将文本与图标对齐

我想将图标与文本对齐，如下图所示:

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

结果:

enter image description here

我的代码是错误的还是修复它会有帮助。

最佳答案

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

enter image description here

如果是这样，您只需将 vertical-align img 居中。

.download img {vertical-align:middle;}

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

关于css 将文本与图标对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29472526/

相关文章：

html - 如何将一个元素与其他三个元素居中并使它们响应？