jcarousel如何垂直居中項目

Question

我接管了使用jQuery（所有新技術）的ASP.NET MVC 3 C＃Razor網站的維護。我的便攜式電腦中的物品是各種尺寸的縮略圖。我希望他們能夠在旋轉木馬中垂直居中，但我一直無法想出如何實現這一目標。

我嘗試了在各個地方放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 \探戈\ 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

我要離開我的其他答案的情況下，它可以幫助別人，但我發現現在一個更好的答案，關於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]" /> 

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

我知道這是很舊，甚至已經的jCarousel變化顯著，但我會建議好醇」 display: table-cell。

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

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