HTML中不同字号文本的左右对齐问题

这个问题我碰到过不少次，其实核心是float布局的垂直对齐逻辑和你想要的底部对齐不匹配，再加上不同字号的inline元素默认是基线对齐，才会出现错位的情况。给你两个靠谱的解决方案：

方案一：使用Flexbox布局（推荐） #

Flexbox是现代布局的首选，它能轻松实现你要的效果，代码也更简洁：

<style>
  .align-container {
    display: flex;
    justify-content: space-between; /* 让两个元素分别靠左右 */
    align-items: flex-end; /* 强制沿底部对齐 */
  }
  .left {
    font-size: 300%;
  }
  /* .right不需要设置float了，flex会自动处理排列 */
</style>

<div class="align-container">
  <span class="left">Left Alignment</span>
  <span class="right">Right Alignment</span>
</div>

Flexbox的优势在于不管两个元素的字号、高度差异多大，都能稳定地按你设置的对齐方式排列，而且兼容性现在已经非常好了。

方案二：用vertical-align调整（适合不想改布局结构的情况） #

如果你不想引入flex容器，也可以去掉float，通过vertical-align: bottom来强制底部对齐：

<style>
  .left {
    font-size: 300%;
    display: inline-block;
    vertical-align: bottom; /* 关键属性 */
  }
  .right {
    display: inline-block;
    vertical-align: bottom; /* 和左侧保持一致 */
    float: none; /* 去掉原来的float，否则vertical-align无效 */
  }
</style>

<span class="left">Left Alignment</span>
<span class="right">Right Alignment</span>

为什么原来的代码不行？ #

你之前用float会让元素脱离正常文档流，display: inline对float元素其实不起作用（float元素默认是块级表现）。而且默认情况下，不同字号的inline元素是基线对齐，不是底部对齐，所以看起来会错位。

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