title: Horizontally center table row
body: <p>I have a table which looks like this:
  <a href="https://i.stack.imgur.com/rkVGx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rkVGx.png" alt="enter image description here"></a></p>
  
  <p>What I'd like is the bottom row to be centered horizontally, so that it will look like this:
  <a href="https://i.stack.imgur.com/ZwPOo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZwPOo.png" alt="enter image description here"></a></p>
  
  <p>How would I go about doing this? Note that the table will be dynamic and can have an even or odd number of elements in the last row.</p>
  
  <p>Code: <a href="https://jsfiddle.net/czyuyt05/2/" rel="nofollow noreferrer">https://jsfiddle.net/czyuyt05/2/</a></p>
  
  <pre><code>&lt;table class="dna-table"&gt;
    &lt;tr class="dna-row"&gt;
      &lt;td class="dna-element"&gt;&lt;p class="symbol"&gt;Co&lt;/p&gt;&lt;/td&gt;
      &lt;td class="dna-element"&gt;&lt;p class="symbol"&gt;Cn&lt;/p&gt;&lt;/td&gt;
      &lt;td class="dna-element"&gt;&lt;p class="symbol"&gt;En&lt;/p&gt;&lt;/td&gt;
      &lt;td class="dna-element"&gt;&lt;p class="symbol"&gt;Ps&lt;/p&gt;&lt;/td&gt;
      &lt;td class="dna-element"&gt;&lt;p class="symbol"&gt;Gr&lt;/p&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr class="dna-row"&gt;
      &lt;td class="dna-element"&gt;&lt;p class="symbol"&gt;Pr&lt;/p&gt;&lt;/td&gt;
      &lt;td class="dna-element"&gt;&lt;p class="symbol"&gt;Rs&lt;/p&gt;&lt;/td&gt;
      &lt;td class="dna-element"&gt;&lt;p class="symbol"&gt;In&lt;/p&gt;&lt;/td&gt;
     &lt;/tr&gt;
   &lt;/table&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.dna-table {
  
  }
  
  .dna-row {
    text-align: center;
    margin: auto;
    width: 100%;
  }
  
  .dna-element {
    border: 1px solid gray;
    width: 100px;
    height: 120px;
    text-align: center;
    margin: auto;
   }
  
  .symbol {
    font-size: 30px;
    font-weight: bold;
  }
  </code></pre>