表格双列无法对齐求助：如何实现歌词双列居中对齐？

我需要实现每行双列展示歌词，但用HTML表格做的双列布局存在两个问题：一是不同表格的列宽无法对齐，二是整个布局没法居中。调整.lyricsFi对齐方式、设置统一宽度都没解决问题。

修改后的代码实现 #

CSS 样式

.lyricsDual {
  border-collapse: collapse;
  margin: 20px auto; /* 实现表格整体居中 */
  width: 80%; /* 可根据需求调整表格总宽度 */
}

.lyricsFi {
  text-align: right;
  border-right: 1px #888 solid;
  width: 50%; /* 两列各占一半宽度，保证对齐 */
  padding-right: 10px;
}

.lyricsEn {
  text-align: left;
  width: 50%;
  padding-left: 10px;
}

.lyricsFi, .lyricsEn {
  vertical-align: top;
}

/* 重置浏览器默认表格样式，避免干扰 */
table {
  border-spacing: 0;
  border-color: transparent;
}

HTML 结构

<table class="lyricsDual">
  <tbody>
    <!-- 第一组歌词 -->
    <tr>
      <td class="lyricsFi">
        <h3>näkin laulu</h3>
        näkki laulaa lauluaan<br>
        luokseen sävelet houkuttavat<br>
        kylmään järveen nukkumaan<br>
        ihmislasta tuudittaa<br>
      </td>
      <td class="lyricsEn">
        <h3>the chant of näkki</h3>
        näkki chants a song<br>
        its tunes fill the air<br>
        shivers of chillness<br>
        cradle a human child<br>
      </td>
    </tr>
    <!-- 第二组歌词，通过内边距增加组间间距 -->
    <tr>
      <td class="lyricsFi" style="padding-top: 20px;">
        <h3 id="huomen">huomen</h3>
        kuulaina öinä syksyn<br>
        kajo täyttää taivaan hohtoon<br>
        sarasteen koittaessa<br>
        taivaanlaki ylle kumartuu<br>
        huomenen tervehdyksen<br>
      </td>
      <td class="lyricsEn" style="padding-top: 20px;">
        <h3 id="morrow">morrow</h3>
        in the crystalline autumn nights<br>
        dawning reddens the sky<br>
        ambience of<br>
        looming light bends over<br>
        morrow's greeting<br>
      </td>
    </tr>
  </tbody>
</table>

关键修改说明 #

• 合并表格容器：原来每组歌词单独使用一个表格，导致列宽随内容自动变化无法对齐。将所有歌词放入同一个表格，两列宽度能保持统一。
• 实现居中：通过margin: 0 auto配合表格宽度设置，让整个歌词布局在页面中居中。
• 固定列宽分配：给两列各设置width: 50%，确保无论内容长短，两列始终平分表格宽度，避免错位。
• 清理默认样式：重置表格的默认边框间距和颜色，消除浏览器自带样式对布局的干扰。

内容的提问来源于stack exchange，提问作者tuba