title: Why won't my text center here?
body: <p>I have the following CSS:</p>
  
  <pre><code>.me-header {
      display: inline-block;
      position: relative;
      top: 50px;
      left: 10px;
  }
  
      .me-header a {
          color: #333;
          font: 10px "Lucida Grande", Helvetica, sans-serif;
          text-decoration: none
      }
  
  .resume-header {
      display: inline-block;
      position: relative;
      top: 50px;
      left: 100px;
  
  }
  
      .resume-header a {
          color: #333;
          font: 10px "Lucida Grande", Helvetica, sans-serif;
          text-align: center;
          text-decoration: none
      }
  
  .center-text {
      text-align: center;
  }
  </code></pre>
  
  <p>And the following HTML:</p>
  
  <pre><code>&lt;div class="me-header"&gt;
                  &lt;a href="#"&gt;&lt;img src="media/me-icon.png" alt="Picture of Christian Selig"&gt;&lt;br&gt; &lt;span class="center-text"&gt;Contact Me&lt;/span&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="resume-header"&gt;
                  &lt;a href="resume.pdf"&gt;&lt;img src="media/resume-icon.png" alt="Resume icon" title="Click to download resume (PDF)"&gt;&lt;br&gt; &lt;span class="center-text"&gt;Resume (PDF)&lt;/span&gt;&lt;/a&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>But my text still comes out left-aligned. Why?</p>