jquery - jcarousel如何垂直居中元素

Question

我正在接管使用 jQuery(对我来说都是新技术)的 ASP.NET MVC 3 C# Razor 网站的维护工作。我的 jcarousel 中的元素是各种尺寸的缩略图。我希望它们在旋转木马中垂直居中，但我一直无法弄清楚如何实现这一点。

我尝试将 vertical-align: middle; 放在不同的地方，但没有效果。我想问题是我对网络开发还很陌生，遗漏了一些明显的东西，但我已经做了几个小时，所以终于向这个优秀的社区寻求帮助!

如何让我的图片在轮播中垂直居中？

在我看来，这是我的代码:

<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>

这里是 jcarousel\tango\skin.css 中的非按钮轮播内容(请注意，其中一些也出现在 View 的代码中，我认为这意味着 View 中的代码会覆盖此代码):

.jcarousel-skin-tango .jcarousel-container {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
   border-radius: 10px;
    background: #F0F6F9;
    border: 1px solid #346F97;
}

.jcarousel-skin-tango .jcarousel-direction-rtl {
    direction: rtl;
}

.jcarousel-skin-tango .jcarousel-container-horizontal {
    width: 245px;
    padding: 20px 40px;
}

.jcarousel-skin-tango .jcarousel-container-vertical {
    width: 75px;
    height: 245px;
    padding: 40px 20px;
}

.jcarousel-skin-tango .jcarousel-clip {
    overflow: hidden;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
    width:  245px;
    height: 75px;
}

.jcarousel-skin-tango .jcarousel-clip-vertical {
    width:  75px;
    height: 245px;
}

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

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

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

.jcarousel-skin-tango .jcarousel-item-vertical {
    margin-bottom: 10px;
}

.jcarousel-skin-tango .jcarousel-item-placeholder {
    background: #fff;
    color: #000;
}

Answer 1

我在我的 View 文件中更改了以下 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;
}