Html 需要的图像是垂直对齐中间

我正在尝试使旋转木马中的缩略图默认为“中间垂直对齐”。我知道stackflow上有很多关于这个问题的帖子，建议使用：

vertical-align: middle;

连同

 display:inline-block;

但是李元素没有起任何作用。我也没有任何浮动项目。有人能给我提些建议吗

链接到JSFIDLE:

---

解决方案1

对于ul，请尝试

显示：表格

，对于li，请尝试

表格单元格

小提琴：

解决方案2

使用

位置：相对；最高：50%；转化：translateY（-50%）用于
img

小提琴：
Easy peasy japanesey，只需将此
img
选择器修改为：

   .maxcarousel__inner ul li img {
      position: absolute;
      bottom: 0;
      top: 0;
      margin: auto;
      width: 100%;
    }

请将您的JSFIDLE示例减少到所需的最小代码量。然后将“垂直对齐：中间对齐”应用于表格单元格。好的，它确实有效。谢谢你的建议。但我有3个以上的图像在旋转木马，我想显示只有3个在同一时间。整个过程（使用javascript）运行得非常好，除了垂直对齐。如果我使用表格和表格单元格，它会强制我的所有图像同时显示。请检查一下。