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的高度是动态的。有什么办法可以垂直居中作为生成内容一部分的图像吗？

这是fiddle with an example。

我无法使用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%;
}

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

Updated fiddle

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

1 个答案: