html - 水平居中排

我有一张桌子，看起来像这样：


我想要的是将底部行水平居中，这样它将看起来像这样：


我将如何去做呢？请注意，该表将是动态的，并且在最后一行中可以具有偶数或奇数个元素。

代码：https://jsfiddle.net/czyuyt05/2/

<table class="dna-table">
  <tr class="dna-row">
    <td class="dna-element"><p class="symbol">Co</p></td>
    <td class="dna-element"><p class="symbol">Cn</p></td>
    <td class="dna-element"><p class="symbol">En</p></td>
    <td class="dna-element"><p class="symbol">Ps</p></td>
    <td class="dna-element"><p class="symbol">Gr</p></td>
  </tr>
  <tr class="dna-row">
    <td class="dna-element"><p class="symbol">Pr</p></td>
    <td class="dna-element"><p class="symbol">Rs</p></td>
    <td class="dna-element"><p class="symbol">In</p></td>
   </tr>
 </table>

的CSS

.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;
}

最佳答案

您可以在三个td之前和之后添加空的tds
https://jsfiddle.net/czyuyt05/3/

<table class="dna-table">
  <tr class="dna-row">
    <td class="dna-element"><p class="symbol">Co</p></td>
    <td class="dna-element"><p class="symbol">Cn</p></td>
    <td class="dna-element"><p class="symbol">En</p></td>
    <td class="dna-element"><p class="symbol">Ps</p></td>
    <td class="dna-element"><p class="symbol">Gr</p></td>
  </tr>
  <tr class="dna-row">
    <td></td>
    <td class="dna-element"><p class="symbol">Pr</p></td>
    <td class="dna-element"><p class="symbol">Rs</p></td>
    <td class="dna-element"><p class="symbol">In</p></td>
    <td></td>
   </tr>
 </table>

关于html - 水平居中排，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38033683/