Jquery jcarousel如何垂直居中项目

我正在接管一个ASP.NETMVC3C#Razor网站的维护工作，该网站使用jQuery（对我来说是所有新技术）。我的jcarousel中的项目是各种大小的缩略图。我希望它们在旋转木马中垂直居中，但我还没有弄清楚如何做到这一点

我试着把

垂直对齐：中间在不同的地方，但没有效果。我想问题是，我对网络开发还很陌生，我错过了一些明显的东西，但我已经做了几个小时了，所以我终于向这个杰出的社区寻求帮助了

如何使图像在旋转木马中垂直居中

以下是我的视图中的代码：

<ul id="screenshot-carousel" class="jcarousel-skin-tango">
  @{ string[,] screenshots = ViewBag.Screenshots; }
  @for (int i = 0; i < screenshots.GetLength(0); i++)
  {
    <li><a class="screenshot" href="@Url.Content("~/Content/images/map-creator/" + screenshots[i, 0] + ".jpg")" title="@screenshots[i, 1]">
      <img src="@Url.Content("~/Content/images/map-creator/" + screenshots[i, 0] + "_t.jpg")" width="@screenshots[i, 2] " height="@screenshots[i, 3] " alt="@screenshots[i, 1]" /></a></li>
  }
</ul>
@section HtmlHead
{
  <style type="text/css">
/**
 * Overwrite for having a carousel with dynamic width.
 */
.jcarousel-skin-tango .jcarousel-container-horizontal {
    width: 85%;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
    width: 100%;
}

.jcarousel-skin-tango .jcarousel-item {
    width: auto;
    height: auto;
}

.jcarousel-skin-tango .jcarousel-item-horizontal {
    margin-left: 0;
    margin-right: 3px;
}

    a.screenshot img {
      border: 1px solid #aaa;
    }
  </style>
  <script type="text/javascript">
      $(document).ready(function () {
          $('#screenshot-carousel').jcarousel();

          $(".screenshot").colorbox({
              rel: 'screenshot',
              width: "1200",
              height: "600",
              current: "{current} of {total}"
          });
      });    
  </script>

我在我的视图文件中更改了以下css，它可以在Chrome上运行。设置线条高度和垂直对齐似乎就是它所做的。在IE10上仍然不起作用，所以我开始认为IE10是不可能的。如果有人有更好的答案，请张贴，我会接受它而不是我的

.jcarousel-skin-tango .jcarousel-clip-horizontal {
    width: 100%;
    height: 100%;
}

.jcarousel-skin-tango .jcarousel-item {
    width: auto;
}

.jcarousel-skin-tango .jcarousel-item-horizontal {
    margin-left: 0;
    margin-right: 3px;
    height: auto;
    line-height: 80px;
}

a.screenshot img {
  border: 1px solid #aaa;
  vertical-align: middle;
}

我留下了我的另一个答案，以防对某人有所帮助，但我现在找到了一个更好的答案，它适用于IE10和Chrome（虽然Chrome上的定心可能并不完美，但对我来说已经足够接近了）。我没有设置
行高
和
垂直对齐
属性，而是在img中设置适当的上边距，即（最大图像高度-图像高度）/2。我在控制器中计算该值，并将该值传递给每个图像的视图

因此，视图中的修复将样式添加到img元素：

<img src="@Url.Content("~/Content/images/map-creator/" + screenshots[i, 0] + "_t.jpg")" width="@screenshots[i, 2]" alt="@screenshots[i, 1]" style="margin-top:@screenshots[i, 4]" />

我知道这已经很旧了，甚至jcarousel也发生了显著的变化，但我建议使用好的ol'
显示：表格单元格

ul#screenshot-carousel {
    display: table;
    width: auto;
}

ul#screenshot-carousel &gt; li {
    display: table-cell;
    vartical-align: middle;
}

仅适用于windows中的Chrome。你不能将li设置为表单元格，因为它是浮动的。我没有尝试过它，@dannio，但是。。。为什么即使它是“默认”浮动的，也不能应用它？为属性应用不同于默认值的值只是为了改变它的默认行为……我在firefox上试用了它，它说由于元素是浮动的，所以将它设置为display:table cell没有效果。我让它工作的方法是这样设置：ul:{display:flex；height:100%}li:{display:flex；align items:center；}
ul#screenshot-carousel {
    display: table;
    width: auto;
}

ul#screenshot-carousel &gt; li {
    display: table-cell;
    vartical-align: middle;
}