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

.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

我知道这是相当陈旧的甚至jcarousel发生了重大变化，但我建议你好//Handler which receives the message static Handler myHandler = new Handler() { public void handleMessage(Message msg) { Bundle bundle = msg.getData(); String str1 = bundle.getString("dot"); String str2 = bundle.getString("dash"); //I think i need to use a conditional statement here } }; //Logic done within the worker thread for (int i = 0; i < cArray.length; i++) { if (cArray[i] == '.') { msg = new Message(); bundle = new Bundle(); bundle.putString("dot", "dot dot dot"); msg.setData(bundle); Sos.myHandler.sendMessage(msg); try { Thread.sleep(50); }catch(Exception e) { } try { Thread.sleep(offIntervalTime); }catch(Exception e) { } } else if(cArray[i] == ' ') { try{ Thread.sleep(100); }catch(Exception e) { } } else { msg = new Message(); bundle = new Bundle(); bundle.putString("dash", "dash dash dash"); msg.setData(bundle); Sos.myHandler.sendMessage(msg); try{ Thread.sleep(dash); }catch(Exception e) { } try{ Thread.sleep(offIntervalTime); }catch(Exception e) { } } }。

display: table-cell

Answer 2

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

Answer 3

我离开了我的另一个答案，以防它可以帮助某人，但我现在找到了一个更好的答案，适用于IE10和Chrome（尽管Chrome的中心可能不完美，但对我来说已经足够接近了）。在我的img中设置line-height和vertical-align属性而不是设置适当的上边距，即（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]" />

jcarousel如何垂直居中项目

3 个答案: