Question

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

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

Answer 1

我发现这在大多数情况下都有效，只要文字和图像没有大规模出现：

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

margin-right在图像和文本之间留出一点空间。

Answer 2

制作图像inline元素，将线条高度设置为坐标并将垂直线对齐设置为容器。

Answer 3

我找不到一个优雅的解决方案。这是一个有工作解决方案的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;
}

：之前可能是你所拥有的，除了'position：absolute'风格。然后我用一个边距来抵消原来的div。

希望这有帮助。

鲍勃

垂直定位伪图像元素（CSS）

3 个答案: