title: Image should be center align as well as vertical align middle
body: <p>I have a div for image slider,inside that div I have ul li inside that i have some image with diffrent sizes. My requirment is to place image is center align as well as vertical align middle.
  my html markp is </p>
  
  <pre><code>&lt;div id="placesAlbumSlidesContainer"&gt;
              &lt;ul style="width: 50000px;" id="placesAlbumSlideInner"&gt;
  
                  &lt;li id="image-1" class="placesAlbumSlide placesAlbumSlide"&gt;
                    &lt;span&gt;
  
                        &lt;img align="center" alt="" src="/1-original.jpg"&gt;
  
                        &lt;span title="Report as inappropriate" class="spamPlaceImages" onclick=""&gt;&lt;span class="spamPlaceImagesIn"&gt;&lt;/span&gt;&lt;/span&gt;
                    &lt;/span&gt;
                  &lt;/li&gt;
  
                  &lt;li id="image-2" class="placesAlbumSlide placesAlbumSlide"&gt;
                    &lt;span&gt;
  
                        &lt;img align="center" alt="www.geocaching.com|http://www.geocaching.com|Friday, Oct 29, 2010" src="http://fabulis-place-images.s3.amazonaws.com/development/4-original.jpg"&gt;
  
                        &lt;span title="Report as inappropriate" class="spamPlaceImages" onclick=""&gt;&lt;span class="spamPlaceImagesIn"&gt;&lt;/span&gt;&lt;/span&gt;
                    &lt;/span&gt;
                  &lt;/li&gt;
  
              &lt;/ul&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>Used Css    </p>
  
  <pre><code>#placesAlbumSlideshow #placesAlbumSlidesContainer {
      margin:0 auto;
      overflow:hidden;
      position:relative;
      width:482px;
      }
      #placesAlbumSlideshow #placesAlbumSlidesContainer .placesAlbumSlide {
      float:left;
      height:280px !important;
      position:relative;
      width:560px;
      }
      .placesAlbumSlide span {
      display:inline-block;
      position:relative;
      text-align:center;
      vertical-align:middle;
      }
  
      .placesAlbumSlide img {
      border:medium none;
      display:inline;
      margin-left:-80px;
      max-height:280px;
      position:relative;
      width:auto;
      z-index:2;
      }
      .placesAlbumSlide {
      text-align:center;
      }
  </code></pre>