title: Center logo in html5 boilerplate
body: <p>I'm using <a href="http://html5boilerplate.com/" rel="nofollow">html5 boilerplate</a> and their .ir class. I made the logo clickable, I want to center it in the page but so far no luck. I tried margin: 0 auto; and text-align: center; but they both don't seem to work.</p>
  
  <p>The html</p>
  
  <pre><code>   &lt;a href="/"&gt;&lt;h1 class="ir"&gt;logo header&lt;/h1&gt;&lt;/a&gt;
  </code></pre>
  
  <p>and the css</p>
  
  <pre><code>    h1 {
      height: 373px;
      }
  
      .ir {
      display: block;
      border: 0; 
      text-indent: -999em; 
      overflow: hidden; 
      background-color: transparent; 
      background-repeat: no-repeat; 
      text-align: left; 
      direction: ltr; 
      *line-height: 0; 
      background-image: url(http://i.imgur.com/yYnyJ.jpg);
      }
      .ir br { display: none; }
  </code></pre>