Html 我希望这些图像垂直对齐，我如何实现这一点？

我想垂直对齐图像，但我遇到了问题。

下面是我的代码，允许响应列表。但是，我怎样才能使所有矩形的徽标垂直对齐呢

.container{
垂直对齐：中间对齐；
左边距：自动；
右边距：自动；
宽度：100%；
}
.货柜：在，
.货柜：之后{
显示：表格；
内容：“；
}
.货柜：之后{
明确：两者皆有；
}
.集装箱ul{
填充：10px；
}
#楼面竣工标高{
列表样式类型：无；
}
#李雅芳酒店{
浮动：左；
右边距：6px；
宽度：100px；
}
#aff_评级li img{
宽度：100%；
高度：自动；
}
@媒体屏幕和屏幕（最大宽度：767px）{
#李雅芳酒店{
宽度：30px；
}
}
.作物{
高度：100px；
宽度：400px；
溢出：隐藏；
}
.作物img{
高度：自动；
宽度：100px；
}

您可以将

表格单元格

和

垂直对齐

应用到

li

元素的中间：

.container{
垂直对齐：中间对齐；
左边距：自动；
右边距：自动；
宽度：100%；
}
.货柜：在，
.货柜：之后{
显示：表格；
内容：“；
}
.货柜：之后{
明确：两者皆有；
}
.集装箱ul{
填充：10px；
}
#楼面竣工标高{
列表样式类型：无；
}
#李雅芳酒店{
显示：表格单元格；
右边距：6px；
宽度：100px；
垂直对齐：中间对齐；
}
#aff_评级li img{
宽度：100%；
高度：自动；
}
@媒体屏幕和屏幕（最大宽度：767px）{
#李雅芳酒店{
宽度：30px；
}
}
.作物{
高度：100px；
宽度：400px；
溢出：隐藏；
}
.作物img{
高度：自动；
宽度：100px；
}

一开始我也遇到了同样的问题。但这真的很简单。 将所有相关CSS类设置为

垂直对齐：中间或
显示：表格单元格
或视情况而定

转到以下链接以了解其工作原理

为了使对象垂直对齐，它需要一个具有静态高度特性的父对象。如果孩子的父母没有静态高度属性，则其祖父母需要静态高度属性，依此类推。静态高度属性指的是“px”，而不是“%”或“em”

示例2（td+valign）：

如果向html{}和body{}添加100%的高度，则可以忽略静态高度要求，但绝对位置必须始终存在于子对象中，并且这通常（如果不是始终）会导致其他一些惩罚，使您想要将头发撕下来

html, body, .mydiv { height: 100%; }

要进行垂直对齐，您需要将display属性用作表或使用flexbox。请不要在此处转储代码。要问一个好问题，你必须尽可能地孤立你的问题。使用编辑器中提供的按钮添加演示也有帮助。在你的小提琴中，你不应用我的更改。
.parent {
    background: red; /* just for visual */
    position: relative; /* needed */
    height: 200px; /* needed */
}
.child {
    background:blue; /* just for visual */
    position: absolute; /* needed */
    top: 50%; /* needed */
    transform: translateY(-50%); /* needed */
}

.parent {
    background: red; /* just for visual */
    height: 200px; /* needed */
    display: table-cell; /* needed */
    vertical-align: middle; /* needed */
}
.child {
    background:blue; /* just for visual */
}

html, body, .mydiv { height: 100%; }