title: Centering a div inside a li
body: <p>I have the following piece of HTML:</p>
  
  <pre><code>&lt;ul id="downmenu"&gt;
      &lt;li class="copyright"&gt;
          &lt;div&gt;&amp;copy; 2011. All rights reserved.&lt;/div&gt;
      &lt;/li&gt;
      &lt;li class="twitter"&gt;
          &lt;img src="images/twitter.png" alt="" /&gt;
      &lt;/li&gt;
      &lt;li class="facebook"&gt;
          &lt;img src="images/facebook.png" alt="" /&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And the following piece of CSS:</p>
  
  <pre><code>#downmenu {
      font-size:14px;
      border-top: 1px solid #666;
      clear: both;
      list-style-type: none;
      margin: 20px 0;
      overflow: hidden;
      padding: 11px 0 11px 34px;
      width: 870px;   
  }
  
  #downmenu li {
      float:left;
  }
  
  #downmenu li.copyright {
      margin-right:540px;
      height:36px;
  }
  
  #downmenu li.copyright div{
      margin: auto 0;
  }
  </code></pre>
  
  <p>(I think) <code>#downmenu li.copyright</code> is set to 36px tall, and I want to centre vertically the <code>div</code> inside it. To achieve that I've used <code>margin: auto 0;</code>. But it isn't centered.</p>
  
  <p>Any clue?</p>