SlimTheMan
New Member
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 \[code\]vertical-align: middle;\[/code\] 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:\[code\]<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="http://stackoverflow.com/questions/15821726/@Url.Content("~/Content/images/map-creator/" + screenshots[i, 0] + ".jpg")" title="@screenshots[i, 1]"> <img src="http://stackoverflow.com/questions/15821726/@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>\[/code\]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):\[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;}\[/code\]