title: Vertical Align Image within DIV
body: <p>I've got a pretty minor problem that I think can be resolved by re-thinking my CSS.</p>
  
  <p>On a part of a page, I've got a series of images. Initially, each image is hidden (See CSS Below). I've got it working fine. When the page loads, the first image fades in via jquery. There's a timer set up where after X seconds, the current image fades out and the next fades in. </p>
  
  <p>Each image is contained in a larger DIV. The image is supposed to sitting exactly in the middle of the div (Vertically and Horizontally). Since each image could be a different size, i had to write in a bit of logic to check the height of the image and adjust its margins on-the-fly (Again, see code below). And this works fine, except for the very first image. The calculated height of the first image is always 0... which makes it appear lower than the middle of the div.</p>
  
  <p>Can this same effect be acheived using vertical-alignment? So far I've been unsuccessful.</p>
  
  <p>Any help is much appreciated.</p>
  
  <h2>Thanks</h2>
  
  <p>CODE</p>
  
  <p>Markup</p>
  
  <pre><code>    &lt;div id="logowrapper"&gt;
          &lt;div class="logo"&gt;
              &lt;img src="" /&gt;
          &lt;/div&gt;
          &lt;div class="logo"&gt;
              &lt;img src="" /&gt;
          &lt;/div&gt;
          &lt;div class="logo"&gt;
              &lt;img src="" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#logowrapper
  {
      border-right: 2px solid #DDD;
      display: block;
      position: absolute;
      top: 12px;
      left: 10px;
      text-align: center;
      width: 370px;
      height: 208px;
      background-color: #FFF;
  }
  .logo
  {
      display: none;
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$(document).ready(function() {
      var currentLogo = 0;
      var numLogos = $(".logo").size();
      var interval = 3000; 
      var boxHeight = $("#logowrapper").height();
      function updateLogo() {
          if (currentLogo &gt;= numLogos) {
              currentLogo = 0;
          }
  
  
          $(".logo").hide();  
          var thisLogo = $(".logo:eq(" + currentLogo + ")");
          thisLogo.fadeIn();
          var logoHeight = thisLogo.height();
  
          var newMargin = parseInt((boxHeight / 2), 10) - parseInt((logoHeight / 2), 10);
  
          thisLogo.css({ marginTop: newMargin });
  
          currentLogo++;
  
      }
      setInterval(updateLogo, interval);
      updateLogo();
  
  
  });
  </code></pre>