日文字符与罗马音无法垂直对齐求助：需罗马音置于汉字下方

修改后的CSS代码 #

.result {
  margin-left: 8px;
  display: inline-block; /* 替换float，实现横向排列且保留块级特性 */
}

.result > div {
  display: flex;
  flex-direction: column;
  align-items: center; /* 确保罗马音在汉字正下方 */
  text-align: center;
}

修改后的HTML代码 #

<div>
  <span class="result">
    <div>
      <div>朝</div>
      <div>asa</div>
    </div>
  </span>
  <span class="result">
    <div>
      <div>もちろん</div>
      <div>mochiron</div>
    </div>
  </span>
</div>

核心调整说明 #

• 用display: inline-block替代float: left，既实现横向排列，又避免浮动引发的布局偏移问题
• 给字符-罗马音容器设置flex-direction: column，让内容垂直堆叠
• align-items: center保证罗马音始终对齐汉字的中心位置，即使字符长度不同也能保持正下方对齐

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