css - 垂直定位伪图像元素 (CSS)

Question

我正在使用:before伪元素将小图像添加到我网站上的下载链接。图像的高度大于行高，并且图像的底部与文本的底部对齐。

如何更改伪元素的垂直对齐方式？理想情况下，图像的中心与文本的中心对齐？

Answer 1

我发现这在大多数情况下都有效，只要文本和图像没有按比例缩小：

#elem:before
{
    content: url(image.png);
    position: relative;
    bottom: -.5ex;
    margin-right: .5em;
}

在margin-right图像和文本之间放置了一点空间。

Answer 2

我找不到优雅的解决方案。这是一个带有工作解决方案的 jsFiddle：

http://jsfiddle.net/rcravens/pAcDE/

给定以下元素：

<div id='elem'>Bob Cravens</div>

我有这个 CSS：

#elem:before{
    content: '';
    height: 160px;
    width: 136px;
    background: url('http://bobcravens.com/Content/images/author_thumb.png');
    position: absolute;
    top: 0px;
    left: 0px;
}
#elem{
    background-color: red;
    margin: 60px 136px;
}

:before 可能是您所拥有的，除了 'position: absolute' 样式。然后我用一个边距来抵消原来的div。

希望这可以帮助。

鲍勃

Answer 3

制作图像inline元素，为其设置行高度并将垂直对齐设置为容器。