title: text-align: center not working on <a> but does on <h1>
body: <p>I have a very simple and straight forward form:</p>
  
  <pre><code>&lt;form action="{{ path("fos_user_security_check") }}" method="post"&gt;
      &lt;h1&gt;Title&lt;/h1&gt;
  
      &lt;input class="input" type="text" name="_username" placeholder="{{ 'security.login.username'|trans }}"
             value="{{ last_username }}" required /&gt;
      &lt;input class="input" type="password" name="_password"
             placeholder="{{ 'security.login.password'|trans }}" required /&gt;
      &lt;input type="checkbox" id="remember_me" name="_remember_me" value="on" /&gt;
      &lt;label class="text" for="remember_me"&gt;
          {{ 'security.login.remember_me'|trans }}
      &lt;/label&gt;
      {% if error %}
          &lt;div class="err"&gt;{{ error.messageKey|trans(error.messageData, 'security') }}&lt;/div&gt;
      {% endif %}
      &lt;button&gt;{{ 'security.login.submit'|trans }}&lt;/button&gt;
      &lt;a href="{{ path('fos_user_resetting_request') }}"&gt;Forgot your password?&lt;/a&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>form {
      position: relative;
      z-index: 1;
      background: #FFFFFF;
      max-width: 360px;
      margin: 0 auto 100px;
      padding: 45px;
      box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  }
  
  form h1 {
      text-align: center;
      margin: 0 0 15px;
      padding: 0;
      font-size: 36px;
      font-weight: 300;
      color: #1a1a1a;
  }
  
  form h2 {
      text-align: center;
      margin: 0 0 15px;
      padding: 0;
      font-size: 20px;
      font-weight: 300;
      color: #1a1a1a;
  }
  
  form input[type="text"], form input[type="password"] {
      font-family: "Roboto", sans-serif;
      outline: 0;
      background: #f2f2f2;
      width: 100%;
      border: 0;
      margin: 0 0 15px;
      padding: 15px;
      box-sizing: border-box;
      font-size: 14px;
  }
  
  form input[type="checkbox"] {
      font-family: "Roboto", sans-serif;
      outline: 0;
      background: #f2f2f2;
      border: 0;
      margin: 0 0 15px;
      padding: 15px;
      box-sizing: border-box;
      font-size: 14px;
  }
  
  form .text {
      color: #919191;
      font-size: 14px;
  }
  
  form a {
      color: #919191;
      font-size: 14px;
      text-align: center;
      text-decoration: none;
  }
  </code></pre>
  
  <p>My text-align: center works perfectly on <code>&lt;h1&gt;</code>, but why doesn't it work for my <code>&lt;a&gt;</code> link? I don't get it. Can someone please help, or explain why? It is not as if something is really complex with this simple design.</p>