Html 如何对齐此li和span中的图像和文本

我正在尝试以li和span对齐图像和文本。 我试过很多类似的问题和答案，但都没有成功。 不幸的是，使用标签或表格不是一个选项

谢谢

.checkbox、.radio{
宽度：19px；
高度：20px；
填充：0px；
背景：url（../../Content/Images/tristatecheckbox.jpg）；
显示：块；
清除：左；
浮动：左；
}
格林先生{
背景颜色：绿色；
背景：url（../../Content/Images/PermissionChecked.jpg）；
位置：绝对位置；
顶部：11px；
左：-20px；
}
瑞德先生{
背景色：红色；
位置：绝对位置；
顶部：11px；
左：-20px；
}
锂
{
光标：指针；
}

可查找


国家

使用

显示：flex在容器中，然后
对齐项目：居中
将其居中。
此外，要删除订单图像，请使用
列表样式类型：none


.checkbox，
.收音机{
宽度：19px；
高度：20px；
填充：0px；
背景：url（../../Content/Images/tristatecheckbox.jpg）；
显示：块；
清除：左；
浮动：左；
}
瑞德先生{
背景色：红色；
}
保险商实验室{
列表样式类型：无；
}
李{
光标：指针；
}
.手风琴标题{
显示器：flex；
对齐项目：居中；
}


可查找

使用
位置：绝对
到
.red
并根据需要使用
上/左
定位

还可以使用
position:relative
在您的案例中包装DOM
。手风琴标题


.checkbox，
.收音机{
宽度：19px；
高度：20px；
填充：0px；
背景：url（../../Content/Images/tristatecheckbox.jpg）；
显示：块；
清除：左；
浮动：左；
}
.手风琴标题{
位置：相对位置；
}
瑞德先生{
背景色：红色；
位置：绝对位置；
左：-28px；
}
李{
光标：指针；
列表样式类型：无；
}


可查找

如果你不喜欢使用
flex
，你可以使用combo
absolute
+
transform:translate
:D。所以在我的代码中

position: absolute; top: 50%;

平均50%的第一位家长拥有
职位：reative
（
li>span
）

指的是50%本身
.checkbox、.radio{
宽度：19px；
高度：20px；
填充：0px；
背景：url（../../Content/Images/tristatecheckbox.jpg）；
显示：块；
}
红色
{
背景色：红色；
}
李{
列表样式：无；
光标：指针；
}
li>span{
显示：内联块；
位置：相对位置；
光标：指针；
}
李>跨度{
位置：绝对位置；
最高：50%；
转化：translateY（-50%）；
}
李：最后一个孩子{
左：未设置；
右：0px；
}
li>span:n第n个孩子（2）{
右：未设置；
左：20px；
}


可查找




国家


年龄

你能演示一下你想让山雀看起来怎么样吗？谢谢，非常接近我想要的，只有上面的li不正确。因为
显示
的span
道具是
内联的（默认为文本），这意味着你不能像
显示：block
那样改变高度或宽度。因此，将
display:inline block
设置为具有两个功能道具。签出我编辑的代码，希望这是有用的。这接近感谢，看到我的编辑和图像。现在缺少的只是顶部图像。设置手风琴标题会导致第一个图像和第二个图像都消失。虽然我的li项目现在垂直间隔非常远。解决了，谢谢，请在手风琴标题容器中设置高度
transform: translateY(-50%);