title: How to vertically center text in a div, overlapping another div
body: <p>I have a css problem. Im trying to vertically center the text in a div, which is overlaying another div, but the text won't budge. </p>
  
  <p>EDIT: Here's teh JSFiddle url: <a href="http://jsfiddle.net/wgSEw/3/" rel="nofollow">http://jsfiddle.net/wgSEw/3/</a></p>
  
  <p>The html is as follows:</p>
  
  <pre><code>&lt;div id="footer-top"&gt;
              &lt;div id="footer-top-left"&gt;
                  &lt;div id="footer-logo"&gt;
              &lt;/div&gt;
              &lt;/div&gt;
              &lt;div id="footer-top-transition"&gt;&lt;/div&gt;
  
          &lt;div id="footer-top-right"&gt;&lt;/div&gt;
          &lt;div id="footer-top-bullets"&gt;
              &lt;div id="site-map" class="footer-bullet"&gt;
                  &lt;img src="&lt;?php echo BASE_IMG_URL . 'bulletlight.png'; ?&gt;" alt="some_text"&gt;
                  &lt;span class="footer-bullet-text"&gt;Site Map&lt;/span&gt;
              &lt;/div&gt;
              &lt;div id="report-issue" class="footer-bullet"&gt;
                  &lt;img src=&lt;?php echo BASE_IMG_URL . 'bulletlight.png'; ?&gt; alt="some_text"&gt;
                  &lt;span class="footer-bullet-text"&gt;Report an Issue&lt;/span&gt;
              &lt;/div&gt;
              &lt;div id="submit-professor" class="footer-bullet"&gt;
                  &lt;img src=&lt;?php echo BASE_IMG_URL . 'bulletblack.png'; ?&gt; alt="some_text"&gt;
                  &lt;span class="footer-bullet-text"&gt;Submit Professor&lt;/span&gt;
              &lt;/div&gt;
              &lt;div id="submit-school" class="footer-bullet"&gt;
                  &lt;img src=&lt;?php echo BASE_IMG_URL . 'bulletblack.png'; ?&gt; alt="some_text"&gt;
                  &lt;span class="footer-bullet-text"&gt;Submit a School&lt;/span&gt;
              &lt;/div&gt; 
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the current css is:</p>
  
  <pre><code>#footer-top{
      position: relative;
      width: 960px;
      height: 63px;
      float: left;
      background-image:url('midtilefooter.png');
  }
  
  #footer-top-left{
      width: 466px;
      height: 63px;
      float: left;
  }
  
  #footer-logo{
      width: 265px;
      height: 63px;
      float: left;
      background-image:url('leftlogo.png');
  }
  
  #footer-top-transition{
      width: 27px;
      height: 63px;
      float: left;
      background-image: url('midblacktransition.png');
  }
  
  #footer-top-right{
      width: 467px;
      height: 63px;
      float: left;
      background-color: black;
  }
  
  #footer-top-bullets{
      position: absolute;
      float: left;
      width: 960px;
      height: 63px; 
      margin-left: 265px;
  }
  
  .footer-bullet{
      float: left;
      height: 63px;
      width: 173px;
      color: white;
  }
  
  .footer-bullet-text{
      height: 63px;
      color: white;
      top: 50%;
      margin-top: -31px;
      vertical-align: middle;
  }
  </code></pre>
  
  <p>This essentially, creates a basic background for the top part of the footer, then overlays a div of bullets onto that background, so that it overlays without obscuring or messing with the background. The bullets are displaying in the correct places and, the text is correctly placed horizontally, but I can't get it to center vertically at all. Any help would be appreciated, as well as any general advice on css, Im pretty new to it, and it's giving me a run for my money. Thansk a lot! </p>