title: Are there other options besides "text-align:center;" for centering things in a DIV?
body: <p>I want  to horizontally align to the center everything in my "loginArea" DIV</p>
  
  <pre><code>&lt;div id="contentArea"&gt;
  
  &lt;div id="loginArea"&gt;
      &lt;div id="loginInstructions"&gt;Login to vote&lt;/div&gt;
      &lt;div id="loginImages"&gt;
          &lt;a href="/auth/google"&gt;&lt;img height="50" border="0" alt="Google" title="Google" class="loginImg" src="/assets/google_plus_icon-8d7622763257233cf58e0465806f58d7c4b82b85271c2d03d0e02b2fadc4ac76.jpg"&gt;&lt;/a&gt;
          &lt;a href="/auth/facebook"&gt;&lt;img height="50" border="0" alt="Facebook" title="Facebook" class="loginImg" src="/assets/facebook-b74d7c49fd91aa6ca76518bf46c7b75fa3b23f47028bea4b2ffaa39f5776dd91.png"&gt;&lt;/a&gt;
          &lt;a href="/auth/twitter"&gt;&lt;img height="50" border="0" alt="Twitter" title="Twitter" class="loginImg" src="/assets/twitter_icon-7dbf8db24c3ad328ea28cba340e4f53e033b64b149850324822cdb622d77f331.png"&gt;&lt;/a&gt;
          &lt;a href="/auth/linkedin"&gt;&lt;img height="50" border="0" alt="LinkedIn" title="LinkedIn" class="loginImg" src="/assets/linkedin-1d4c0d36adcec44fd86c11c47834e51e3f3226b623f91a2f215993633956e431.png"&gt;&lt;/a&gt;
          &lt;a title="MySpace" href='javascript:alert("Loser")'&gt; 
                    &lt;div id="mySpaceLogo"&gt;&lt;/div&gt;
  &lt;/a&gt;    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So I specified these styles</p>
  
  <pre><code>#contentArea {
    width: 100%; 
    background-color: blue;
  }
  
  #loginArea {
          display: flex;
          vertical-align: middle;
          align-items: center;
          text-align:center;
          width: 100%;
          background-color: red;
  }
  
  #loginInstructions {
          display: auto;
  }
  
  #loginImages {
          display: auto;
  }
  </code></pre>
  
  <p>But neither my " text-align:center;" or "align-items: center;" is having any effect -- <a href="https://jsfiddle.net/980obtcz/" rel="nofollow noreferrer">https://jsfiddle.net/980obtcz/</a> .  How do I horizontally align my items?</p>