将 CSS 背景图像与偏移的图像中心轴对齐

Question

我想使用 CSS 的

.png

*-属性将图像文件（如

background-

）与偏移的图像中心轴对齐。

想象一下有以下文件：

<div class="my-icon" data-category="1">abc</div>
<div class="my-icon" data-category="2">def</div>
<div class="my-icon" data-category="1">ghi</div>

具有以下样式表：

.my-icon {
    background-position: center left;
    background-repeat: no-repeat;
    background-size: contain;
    padding-left: 25px;
    height: 30px;
    display: flex;
}

.my-icon[data-category="1"] {
    background-image: url('...../icon-1.png');
}

.my-icon[data-category="2"] {
    background-image: url('...../icon-2.png');
}

我可以对齐图标如下：

background-position: center center;	background-position: center left;

然而，我想要的是以下内容：

我希望图像的中心轴与从

x

的左侧偏移

div

像素的轴对齐。

如何使用纯 CSS 实现这一壮举？ （没有 JS/JQuery？）

Answer 1

我会回复，因为这实际上不是答案，但我没有足够的代表...

如果您可以编辑 HTML，我建议您这样做：

<div class="wrapper">
    <div class="my-icon" data-category="1" style="width: 50%;"></div> <!--image-->
    <div style="width: 50%:">abc</div>
</div>

使用类而不是内联 css 当然。