1

假设我div应用了以下样式：

div {
    border: 1px solid #000;
    padding-left: 35px;
    position: relative;
}

为此，div我应用了一个:before伪元素。该伪元素的内容是图像：

div:before {
    content: url(someImage.png);
    background-color: #ccc;
    position: absolute;
    left: 0;
    width: 30px;
    height: 100%;
}

的高度div是动态的。有什么方法可以使作为生成内容的一部分的图像垂直居中？

这是一个例子。

我不能使用line-height，因为我不知道div. 我不能使用边距或填充，因为生成的内容的背景颜色会超出div. 我怀疑答案是否定的，但我认为在我必须去更改很多标记之前在这里问一下可能是值得的！

4

1 回答 1

8

理论上它应该是可能的，因为它只不过是常规内联<img>标签的 CSS 版本，但这在很大程度上取决于它的格式（可能还有生成元素的格式）。

为简单起见，我会将其设为背景图像，其内容为空字符串：

div:before {
    content: '';
    background: #ccc url(someImage.png) center center no-repeat;
    position: absolute;
    left: 0;
    width: 30px;
    height: 100%;
}

请注意，我利用了灰色背景已经充分覆盖了生成区域的事实——我只是将图像居中在该灰色背景上。

更新的小提琴

于 2012-06-21T10:56:55.050 回答