HTML自定义列表图像中心文本

我目前正在尝试一些列表的自定义，现在我正在使用自定义

列表样式图像

。示例在代码段中。有人能给我解释一下，如何使文本和图像居中，使文本始终与图像居中，图像与文本居中（如果是多行）？我添加了一个简短的图片来阐明我想要实现的目标。
非常感谢。

代码：

正文{
保证金：0；
}
.集装箱{
显示器：flex；
柔性包装：包装；
弯曲方向：行；
高度：100vh；
背景色：白色；
}
.container>div{
最小高度：100vh；
边框：1px纯黑；
框大小：边框框；
背景色：继承；
}
容器>分区内容{
高度：100vh；
宽度：100vw；
背景色：继承；
}
.全宽{
宽度：100%；
}
.半幅{
宽度：50%；
}
.half width>.half width内容{
位置：相对位置；
边际上限：0；
身高：100%；
宽度：100%；
}
名单组{
身高：100%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.列表分区{
填充：0；
宽度：75%；
}
.名单李分区{
位置：相对位置；
边缘底部：5px；
填充：10px；
文本对齐：左对齐；
能见度：可见；
文本转换：大写；
列表样式类型：无；
}
.list div li:第n个孩子（1）{
背景：url(https://fakeimg.pl/30x30/?text=A);
列表样式类型：无；
保证金：0；
填充：10px 10px 10px 48px；
垂直对齐：中间对齐；
背景重复：无重复；
}
.list div li:第n个孩子（2）{
背景：url(https://fakeimg.pl/30x30/?text=B);
列表样式类型：无；
保证金：0；
填充：10px 10px 10px 48px；
垂直对齐：中间对齐；
背景重复：无重复；
}
.list div li:第n个孩子（3）{
背景：url(https://fakeimg.pl/30x30/?text=C);
列表样式类型：无；
保证金：0；
填充：10px 10px 10px 48px；
垂直对齐：中间对齐；
背景重复：无重复；
}
.list div li:第n个孩子（4）{
背景：url(https://fakeimg.pl/30x30/?text=D);
列表样式类型：无；
保证金：0；
填充：10px 10px 10px 48px；
垂直对齐：中间对齐；
背景重复：无重复；
}

清单项目A
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
清单项目B
清单项目C
清单项目D

您可以添加

背景-position-y:50%到
li


正文{
保证金：0；
}
李{
自对准：居中；
}
.集装箱{
显示器：flex；
柔性包装：包装；
弯曲方向：行；
高度：100vh；
背景色：白色；
}
.container>div{
最小高度：100vh；
边框：1px纯黑；
框大小：边框框；
背景色：继承；
}
容器>分区内容{
高度：100vh；
宽度：100vw；
背景色：继承；
}
.全宽{
宽度：100%；
}
.半幅{
宽度：50%；
}
.half width>.half width内容{
位置：相对位置；
边际上限：0；
身高：100%；
宽度：100%；
}
名单组{
身高：100%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.列表分区{
填充：0；
宽度：75%；
}
.名单李分区{
位置：相对位置；
边缘底部：5px；
填充：10px；
文本对齐：左对齐；
能见度：可见；
文本转换：大写；
列表样式类型：无；
}
.list div li:第n个孩子（1）{
背景：url(https://fakeimg.pl/30x30/?text=A);
列表样式类型：无；
保证金：0；
填充：10px 10px 10px 48px；
垂直对齐：中间对齐；
背景重复：无重复；
背景位置y:50%；
}
.list div li:第n个孩子（2）{
背景：url(https://fakeimg.pl/30x30/?text=B);
列表样式类型：无；
保证金：0；
填充：10px 10px 10px 48px；
垂直对齐：中间对齐；
背景重复：无重复；
背景位置y:50%；
}
.list div li:第n个孩子（3）{
背景：url(https://fakeimg.pl/30x30/?text=C);
列表样式类型：无；
保证金：0；
填充：10px 10px 10px 48px；
垂直对齐：中间对齐；
背景重复：无重复；
背景位置y:50%；
}
.list div li:第n个孩子（4）{
背景：url(https://fakeimg.pl/30x30/?text=D);
列表样式类型：无；
保证金：0；
填充：10px 10px 10px 48px；
垂直对齐：中间对齐；
背景重复：无重复；
背景位置y:50%；
}
.名单李分区{
}


清单项目A
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
清单项目B

多重

段落

工作


清单项目D

非常感谢，但是如果在第一个项目文本中输入一些，会发生什么？