title: Cannot center text with HTML5/CSS
body: <p>I am trying simply to center text horizontally in a form as follows:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
     &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
     &lt;div id="contact-form"&gt;  
         &lt;head-black&gt;STEWARD'S WEEKLY REPORT&lt;/head-black&gt;&lt;br&gt;
     &lt;/div&gt;  
  &lt;/html&gt;
  </code></pre>
  
  <p>contents of style.css:</p>
  
  <pre><code>#contact-form {  
      background-color:#F2F7F9;  
      width:925px;  
      padding:10px;  
      margin: 10px auto;      
      border: 6px solid #8FB5C1;  
      -moz-border-radius:25px;  
      -webkit-border-radius:25px;  
      border-radius:15px;  
      position:relative;  
  }  
  
  #contact-form head-black {  
      display:inline-block;
      font-size:14px;  
      text-decoration:underline;
      text-align:center;
  }  
  </code></pre>
  
  <p>The text stays left aligned.</p>