title: Centering an element inside of a DIV using HTML/CSS
body: <p>I am currently working on a periodic table, and although I got the mass and the number to be placed where I want them to, the element symbol just won't budge. I tried everything: converting it from <code>&lt;p&gt;</code> to <code>&lt;span&gt;</code> to <code>&lt;div&gt;</code>, using <code>display: block</code> and setting <code>margin: 0 auto</code>, using <code>text-align: center</code>, but it still won't budge.</p>
  
  <p>Here's the HTML:</p>
  
  <pre><code>        &lt;div id = "a1" class="element alkalimetal"&gt;
              &lt;p&gt;
                  &lt;span id = "anumber"&gt;118&lt;/span&gt;
                  &lt;span id = "amass"&gt;9.008&lt;/span&gt;
              &lt;/p&gt;
              &lt;br&gt;
              &lt;div id = "symbol"&gt;H&lt;/div&gt;
          &lt;/div&gt;
          &lt;div id = "a2" class = "element noblegas"&gt;
  
          &lt;/div&gt;
  </code></pre>
  
  <p>Here's the CSS:</p>
  
  <pre><code>#anumber{
      font-family:Arvo;
      top: 0.1em;
      position:relative;
      vertical-align:super;
      font-size:1.5em;
      float:left;
      padding-left:0.2em;
  }
  
  #symbol{
      width: 5em;
      font-family: AvenirCondensed;
      font-size: 5em;
      text-align:center;
      margin: 0 auto;
  }
  
  #amass{
      font-family:AvenirNext;
      top: 0.1em;
      position:relative;
      vertical-align:super;
      font-size:1.5em;
      float:right;
      padding-right:0.2em
  }
  .element{
      border: 1px solid black;
      border-radius: 3px;
      height: 8em;
      width: 8em;
      float: left;
  }
  </code></pre>
  
  <p>P.S.: This table is designed for mobile so I want to avoid using <code>position:absolute</code> or fixed margin widths.</p>