是否可以垂直居中生成的内容？

Question

假设我有一个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.我怀疑答案是"不",但认为在我必须去更改大量标记之前可能值得问一下!

Answer 1

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

为简单起见,我会将其改为背景图片,其内容为空字符串:

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

请注意,我正在利用您已经将灰色背景充分覆盖生成区域的事实 - 我只是将图像置于灰色背景上.

更新了小提琴