title: Auto margin not working on i tag using font awesome
body: <p>I am using  font awesome <a href="http://fortawesome.github.io/Font-Awesome/" rel="nofollow">http://fortawesome.github.io/Font-Awesome/</a> to create my icons. For this I have added an icon inside an anchor tag. In this anchor tag I am not able to center the icon which is nothing but text with respect to HTML</p>
  
  <p><a href="http://jsfiddle.net/sK2V5/7/" rel="nofollow">http://jsfiddle.net/sK2V5/7/</a></p>
  
  <pre><code> &lt;a class="ico" href="#"&gt;&lt;i class="icon-help"&gt;&lt;/i&gt;&lt;/a&gt;
  
  i:before
  {
    content:"\260E";
  }
  
  .ico {
    border: 1px solid black;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    display: inline-block;
    text-decoration: none;
     width:36px;
    }
  
  .ico i {
      margin-right: auto;
      margin-left: auto;
      display: inline-block; 
  }
  
   .ico i:before {
      margin-right: auto;
      margin-left: auto;
      display: inline-block; 
  }
  </code></pre>