垂直定位伪图像元素 (CSS)答案

【问题标题】：Vertically positioning pseudo image element (CSS)垂直定位伪图像元素 (CSS)
【发布时间】：2011-06-26 10:59:40
【问题描述】：

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

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

【问题讨论】：

您是否尝试过向 :before 元素添加填充？

标签： css image vertical-alignment pseudo-element

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

我通过使用图像作为链接的不重复背景而不是 :before 元素解决了这个问题（至少在视觉上）。我必须使用display: block 并将链接的高度设置为图像的高度，然后使用padding-left 和padding-top 相对于图像背景正确定位链接。
我尝试让伪元素具有行高，但该元素没有出现。当伪元素设置为 display: inline 时，是否需要存在任何其他属性才能正确显示？

【解决方案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;
}

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

希望这会有所帮助。

鲍勃

【讨论】：