title: Vertically align text middle in div element CSS
body: <p>I'm trying to vertically align the text in my banner I've coded but can't seem to work out how to get the display:table-cell; and vertical-align:middle; to work.</p>
  
  <p>Below is the code I have used along with a <a href="http://jsfiddle.net/huddds/v7dBm/2/" rel="nofollow">jsfiddle</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="banner"&gt;
      &lt;div&gt;
          &lt;img src="#" alt="Image 1" width="650" height="326" class="bannerImg item1 selectedImg" /&gt;
          &lt;img src="#" alt="Image 2" width="650" height="326" class="bannerImg item2" /&gt;
          &lt;img src="#" alt="Image 3" width="650" height="326" class="bannerImg item3" /&gt;
      &lt;/div&gt;
      &lt;div class="bannerTags"&gt;
  
          &lt;div class="tagItem tag1 selectedTag"&gt;
              &lt;a href="#"&gt;Item 1&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="tagItem tag2"&gt;
              &lt;a href="#"&gt;Item 2&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="tagItem tag3"&gt;
              &lt;a href="#"&gt;Item 2&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.banner{width:650px; height:326px; background-color:#000000; position:relative; overflow:hidden;}
  .bannerTags{text-align:center; width:650px; height:80px; position:absolute; bottom:0px;
      background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.5)), to(rgba(0,0,0,0.7))); 
      background: -webkit-linear-gradient(top, rgba(255,255,255,0.5), rgba(0,0,0,0.7)); 
      background: -moz-linear-gradient(top, rgba(255,255,255,0.5), rgba(0,0,0,0.7)); 
      background: -ms-linear-gradient(top, rgba(255,255,255,0.5), rgba(0,0,0,0.7)); 
      background: -o-linear-gradient(top, rgba(255,255,255,0.5), rgba(0,0,0,0.7));}
  .tagItem{width:217px; height:80px; float:left; position:relative;display:inline-block}
  .tagItem a{position:absolute; top: 0px; left: 0px; height: 80px; vertical-align: middle; right: 0px;bottom: 0px; color: rgb(255, 255, 255); text-decoration:none;}
  .selectedTag{width:216px !important; height:80px; background-color:#d7df23;}
  .selectedTag a{color:#000000 !important; display:table-cell; vertical-align:middle;}
  .bannerImg{display:none;}
  .selectImg{display:block;}  
  .clr{clear:both;}
  .bannerArrow{width: 0px; height: 0px; border-style: solid; border-width: 0 10px 10px 10px; border-color: transparent transparent #d7df23 transparent; position:absolute; bottom:80px; left:108px; margin-left:-10px;}
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>var bannerPause = 0;
  var bannerValue = 1;
  var tagValue = 1;
  var hoveredTag;
  
  $('.item1').show();
  $('.selectedTag').append('&lt;div class="bannerArrow"&gt;&lt;/div&gt;');
  
  setInterval(function(){
      if(bannerPause == 0){
          $('.bannerArrow').remove();
          $('.tagItem').removeClass('selectedTag');
          if(bannerValue == 3){
              bannerValue = 1;
              tagValue = 1
          }else{
              bannerValue += 1;
              tagValue += 1;
          }
          $('.bannerImg').hide();
          $('.item'+bannerValue).show();
          $('.tag'+tagValue).addClass('selectedTag');
          $('.selectedTag').append('&lt;div class="bannerArrow"&gt;&lt;/div&gt;');
      }else{}
  },5000);
  
  
  $('.tag1').mouseenter(function(){   
      bannerValue = 1;
      tagValue = 1;
      $('.bannerArrow').remove();
      $('.tagItem').removeClass('selectedTag');
      $('.bannerImg').hide();
      $('.item'+bannerValue).show();
      $('.tag'+tagValue).addClass('selectedTag');
      $('.selectedTag').append('&lt;div class="bannerArrow"&gt;&lt;/div&gt;');
  })
  
  $('.tag2').mouseenter(function(){   
      bannerValue = 2;
      tagValue = 2;
      $('.bannerArrow').remove();
      $('.tagItem').removeClass('selectedTag');
      $('.bannerImg').hide();
      $('.item'+bannerValue).show();
      $('.tag'+tagValue).addClass('selectedTag');
      $('.selectedTag').append('&lt;div class="bannerArrow"&gt;&lt;/div&gt;');
  })
  
  $('.tag3').mouseenter(function(){   
      bannerValue = 3;
      tagValue = 3;
      $('.bannerArrow').remove();
      $('.tagItem').removeClass('selectedTag');
      $('.bannerImg').hide();
      $('.item'+bannerValue).show();
      $('.tag'+tagValue).addClass('selectedTag');
      $('.selectedTag').append('&lt;div class="bannerArrow"&gt;&lt;/div&gt;');
  })
  
  $('.tagItem').mouseenter(function(){   
      bannerPause = 1;
  })
  $('.tagItem').mouseleave(function(){
      bannerPause = 0;
  })
  </code></pre>