在html和css中居中放置不同的图像和不同的文本列表*ul*和*li*

我在这里遇到了一些困难

我们的目标是在每一行上列出不同的图像，文本也是如此，但我还没有找到最好的方法。。。。。。我正在努力解决这个问题

所以，我正在尝试这个…（见代码）。。。但我无法将文本与图像的垂直尺寸对齐，也无法使图像对窗口大小做出相应的响应，上下缩放始终与文本居中

/*重置*/
保险商实验室{
列表样式：无；
}
.名单{
宽度：100%；
高度：自动；
填充：0；
位置：相对位置；
溢出：可见；
}
.列表p{
颜色：红色；
字体大小：12px；
文字装饰：无；
垂直对齐：中间对齐；
浮动：左；
填充顶部：20px；
}
.list img{
清除：左；
浮动：左；
垂直对齐：中间对齐；
最大宽度：100%；
高度：自动；
填充顶部：20px；
}
.car{}

奥迪



奔驰



切夫



沃尔沃



脉泽

从

img

和

p

中移除浮动，并将

显示添加到
p
中：内联块将使浮动垂直居中

现在，如果要使图像适合其父元素，则必须从图像中删除
width
和
height
属性。但是，将没有空间放置
p
左侧。这是一个可以通过多种方式处理的问题，其中之一就是限制
img
width
（例如
max width:80%
）为
p
留出一些空间


/*重置*/
保险商实验室{
列表样式：无；
}
.名单{
宽度：100%；
高度：自动；
填充：0；
位置：相对位置；
溢出：可见；
}
.列表p{
颜色：红色；
字体大小：12px；
文字装饰：无；
垂直对齐：中间对齐；
填充顶部：20px；
显示：内联块；
}
.list img{
垂直对齐：中间对齐；
最大宽度：100%；
高度：自动；
填充顶部：20px；
}
.car{}



奥迪



奔驰



切夫



沃尔沃



脉泽