Css 如何垂直对齐不同高度的div？

我有以下设置

HTML

每个

实际上都会保存一个图像，但出于此目的，如果图像存在，我将宽度和高度设置为divs high的宽度和高度。是的，我没有重复的ID，但实际上这些div没有ID，只有类

无论如何，我试图让这些div垂直对齐每一行。垂直对齐需要是动态的，如果从一行中删除了最高的框（即，

#box3

），则该行应相应调整（因为重新调整大小窗口将其移动到了另一行或从HTML中一起删除）（如果

#box3

和

#box5

在同一行上，其他行几乎接触到

#box3

边框，当所有

#box3

被移除时，其他行现在应该几乎接触到

#box5

边框）

---

正如您所看到的，我已经在使用垂直对齐了，但没有任何效果。那么我还需要什么样的CSS呢？

只需将

垂直对齐设置为元素本身，而不是包装器

CSS

#wrap{margin: 0 auto; text-align: center; border: 1px solid #000000; }
.list{display: inline-block;margin: 0px 10px; vertical-align: middle;}

请参见
如果您对flexbox的当前浏览器支持感到满意，则可以使用flexbox来实现所需的结果

使用flexbox可以最终将图像水平分布在每一行中，并在垂直中心对齐


/*Flex容器*/
.集装箱{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
证明内容：周围的空间；
}
/*容器内的每个div*/
.货柜组{
自对准：居中；
利润率：20px；
}
#框1{边框：1px实心#000000；背景色：#FF0000；宽度：121px；高度：36px；}
#框2{边框：1px实心#000000；背景色：#00FF00；宽度：125px；高度：39px；}
#框3{边框：1px实心#000000；背景色：0000FF；宽度：185px；高度：52px；}
#框4{边框：1px实心#000000；背景色：#FFFF00；宽度：183px；高度：26px；}
#第5栏{边框：1px实心#000000；背景色：#FF00FF；宽度：105px；高度：44px；}
#第6栏{边框：1px实心#000000；背景色：00FFFF；宽度：170px；高度：34px；}


请尝试在列表类中对齐中间变量

这行吗？
您的文档中不应该有重复的ID。您可以为一个元素分配多个类：
class=“list box1”
@roeland“是的，我不需要重复的ID，但实际上这些div没有ID，只有类。”
#wrap{margin: 0 auto; text-align: center; vertical-align: middle; border: 1px solid #000000;}
.list{display: inline-block;margin: 0px 10px;}

#box1{border: 1px solid #000000; background-color:#FF0000; width: 121px; height:36px;}
#box2{border: 1px solid #000000; background-color:#00FF00; width: 125px; height:39px;}
#box3{border: 1px solid #000000; background-color:#0000FF; width: 185px; height:52px;}
#box4{border: 1px solid #000000; background-color:#FFFF00; width: 183px; height:26px;}
#box5{border: 1px solid #000000; background-color:#FF00FF; width: 105px; height:44px;}
#box6{border: 1px solid #000000; background-color:#00FFFF; width: 170px; height:34px;}

#wrap{margin: 0 auto; text-align: center; border: 1px solid #000000; }
.list{display: inline-block;margin: 0px 10px; vertical-align: middle;}

#wrap{
   margin: 0 auto;
   text-align: center;
   border: 1px solid #000000;
}
.list{
   display: inline-block;
   margin: 0px 10px;
   vartical-align: middle;
}