css - 如何垂直对齐内联图像及其后的内联文本？

Question

有什么方法可以将“content”属性生成的图像元素作为“:before”选择器的一部分垂直对齐到相邻的内联文本旁边？换句话说，我有

<a href="..." class="facebook">Share on Facebook</a>

因为我不想用只与样式有关的不必要的 IMG 元素污染我的标记，我求助于通过 CSS 在链接左侧添加一个小图标(除了它没有正确对齐，因此问题):

a.facebook:before
{
     content: url(/style/facebook-logo.png);
}

我尝试添加一个“vertical-align: middle”(在我看来，这是 CSS 中最难掌握的对齐概念之一，它就是这个属性)但它没有任何效果。 Logo 与文本基线对齐，我不想对像素偏移进行硬编码，因为坦率地说，文本大小因浏览器而异等。对此有什么解决方案吗？

谢谢。

Answer 1

垂直对齐仅适用于表格单元格元素。你可以添加一个 display:table-cell 到 "a.facebook"