0

jQuery を使用する ASP.NET MVC 3 C# Razor Web サイトのメンテナンスを引き継ぎます (私にとってはすべて新しいテクノロジです)。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

誰かに役立つ場合に備えて、他の回答を残していますが、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 に答える