0

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

我尝试vertical-align: middle;在各个地方进行以下放置，但没有效果。我想问题是我对 Web 开发非常陌生，并且缺少一些明显的东西，但是我已经做了几个小时，所以终于向这个出色的社区寻求帮助！

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

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

<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 中的非按钮轮播内容（请注意，其中一些也出现在视图中的代码中，我假设这意味着视图中的代码会覆盖此代码）：

.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;
}
4

3 回答 3

0

我在我的视图文件中更改了以下 css，它适用于 Chrome。设置 line-height 和 vertical-align 似乎就是这样做的。仍然无法在 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;
}
于 2013-04-08T18:33:22.757 回答
0

我留下我的其他答案以防它对某人有帮助，但我现在找到了一个更好的答案，适用于 IE10 和 Chrome（虽然在 Chrome 上居中可能并不完美，但对我来说已经足够接近了）。line-height我没有设置和属性，而是vertical-align在我的 img 中设置了适当的上边距，即 (LARGEST_IMAGE_HEIGHT - IMAGE_HEIGHT) / 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]" />
于 2013-04-08T20:19:24.660 回答
0

我知道这是相当古老的，甚至 jcarousel 也发生了重大变化，但我会推荐好的 ol' display: table-cell。

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

ul#screenshot-carousel &gt; li {
    display: table-cell;
    vartical-align: middle;
}
于 2016-01-11T22:23:45.373 回答