title: jCarousel slider center image
body: <p>I'm showing some images in a jquery jcarousel control.</p>
  
  <p>I gave all images a max-width and max-height so they don't lose the original aspect.
  my problem is with the small images, they are centered horizontally, but I can't get them to center vertically. they are shown on the top middle.</p>
  
  <p>here's the php code I use to load images on the control:</p>
  
  <pre><code>&lt;div align="center"&gt;
      &lt;ul id="mycarousel" class="jcarousel-skin-tango"&gt;
          &lt;?while ($fila = mysql_fetch_array($resultado, MYSQL_ASSOC)) {?&gt;
             &lt;li&gt;&lt;img src="imagenes_bariatrica/&lt;?=$fila["archivo"];?&gt;" style="max- height:480px; max-width: 360px;" alt="&lt;?=$fila["comentario"];?&gt;"/&gt;
              &lt;/li&gt;
          &lt;?}?&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and here's the most important jCarousel css code:</p>
  
  <pre><code>.jcarousel-skin-tango .jcarousel-container {
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
     border-radius: 10px;
      background: #F0F6F9;
      border: 2px solid #096D0A;
  
  }
  
  .jcarousel-skin-tango .jcarousel-direction-rtl {
      direction: rtl;
  }
  
  .jcarousel-skin-tango .jcarousel-container-horizontal {
      width: 500px;
      padding: 20px 40px;
  
  }
  
  .jcarousel-skin-tango .jcarousel-container-vertical {
      width: 500px;
      height: 375px;
      padding: 40px 20px;
  
  }
  
  .jcarousel-skin-tango .jcarousel-clip {
      overflow: hidden;
  }
  
  .jcarousel-skin-tango .jcarousel-clip-horizontal {
      width:  500px;
      height: 370px;
  
  }
  
  .jcarousel-skin-tango .jcarousel-clip-vertical {
      width:  500px;
      height: 370px;
  }
  
  .jcarousel-skin-tango .jcarousel-item {
      width: 500px;
      height: 375px;
  
  
  }
  </code></pre>