jcarousel how to vertically center items

Question

I'm taking over maintenance of an ASP.NET MVC 3 C# Razor website that uses jQuery (all new technologies for me). My items in my jcarousel are thumbnails of various sizes. I would like them to be centered vertically in the carousel, but I have not been able to figure out how to make that happen.

I tried following putting vertical-align: middle; in various places, but to no effect. I imagine the problem is I'm very new to web development and am missing something obvious, but I've been at it a couple hours so am finally asking help from this brilliant community!

How can I get my images centered vertically in the carousel?

Here's my code in my view:

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

And here's the non-button carousel stuff in jcarousel\tango\skin.css (note that some of these appear also in the code in the view, I assume that means the code in the view overrides this code):

.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

I'm leaving my other answer in case it helps someone, but I've found a better answer now that works on IE10 and Chrome (though the centering may not be perfect on Chrome, it's close enough for me). Instead of the setting the line-height and the vertical-align properties, in my img I set the appropriate top margin, which is (LARGEST_IMAGE_HEIGHT - IMAGE_HEIGHT) / 2. I calculate that value in my controller and pass the value in to the view for each image.

So the fix in the view is adding the style to the img element:

<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]" />