Css Flexbox对齐中心使父容器未对齐

我试图垂直对齐并排排列的图像容器中的图像

但是，当我将

align self:center

应用于子对象时，倒数第二个父对象变得有点不对齐

我一直在尝试不同的方法来纠正这个问题，但除非我停止在子图像上使用

display:flex

，否则问题将再次出现

问题似乎是汽车图像最初的高度为37.5px，宽度为50px，但视图的高度和宽度为50px。然而，我认为应该在父代码中考虑这个差异，其中高度和宽度都设置为50px。但是在page inspect元素中，car-image父级高度比下面的容器低3倍

.imageContainer{
高度：$缩略图\图像\侧面\长度；
宽度：$缩略图\图像\侧面\长度；
左边距：自动；
右边距：自动；
显示：内联flex；
框大小：边框框；
}
img{
宽度：100%；
高度：自动；
溢出：隐藏；
框大小：边框框；
显示器：flex；
自对准：居中；
}

{text here}

您将flex属性嵌套到html中太远了。如果要将按钮包装在容器中（我猜其中的按钮设置为

display:inline block

），则应该从按钮中删除display属性，并在按钮容器上设置

display:inline flex

和

flex wrap:wrap

查看我为解决您的问题而制作的这个快速片段

.container{
宽度：100%；
显示：内联flex；
柔性包装：包装；
}
.容器按钮{
宽度：50%；
}
.imageContainer{
高度：30px；
宽度：100%；
左边距：自动；
右边距：自动；
框大小：边框框；
}
img{
宽度：100%；
高度：自动；
溢出：隐藏；
框大小：边框框；
显示器：flex；
自对准：居中；
}

{text here}

{text here}

{text here}

{text here}

完全共享code@TemaniAfif还添加了html标记请提供一个简化的工作示例来演示该问题，因此您应该删除

display:flex从图像标记中，它不能包含其他tags@Huangism我正在做小提琴，很快就会更新