如何解决不同字号文本对齐父元素底部后未互相对齐的问题？

当然能解决啦！这个问题的根源在于不同字号的文本默认的**基线（baseline）**和行高差异——哪怕你已经把两个div对齐到父容器底部，文本本身在各自的div里的排版位置还是会因为浏览器的默认规则出现错位。

下面给你几种实用的解决方法：

方法1：统一行高+Flex容器对齐 #

把父容器的align-items设为flex-end（代替每个子元素单独设置align-self），同时给文本元素设置line-height: 1，消除行高带来的额外间距，让文本底部和自身容器底部完全贴合：

.container {
  display: flex;
  height: 50px;
  background: pink;
  align-items: flex-end; /* 统一让所有子元素对齐到容器底部 */
}
.large, .small {
  margin-right: 5px;
  line-height: 1; /* 行高等于字体大小，消除上下额外空间 */
}
.large {
  font-size: 30px;
}
.small {
  font-size: 15px;
}

方法2：利用vertical-align强制文本对齐 #

如果不想修改行高，可以把文本元素改为inline-block类型，然后设置vertical-align: bottom，强制不同字号的文本底部对齐：

.container {
  display: flex;
  height: 50px;
  background: pink;
  align-items: flex-end;
}
.large, .small {
  margin-right: 5px;
  display: inline-block;
  vertical-align: bottom; /* 强制文本底部对齐 */
}
.large {
  font-size: 30px;
}
.small {
  font-size: 15px;
}

方法3：Flex子元素内部对齐 #

给每个文本元素也设置为flex容器，让内部的文本在自身容器内对齐到底部，从根源上保证文本位置统一：

.container {
  display: flex;
  height: 50px;
  background: pink;
}
.large, .small {
  align-self: flex-end;
  margin-right: 5px;
  display: flex;
  align-items: flex-end; /* 让文本在自身容器内底部对齐 */
}
.large {
  font-size: 30px;
}
.small {
  font-size: 15px;
}

为什么原来的代码会出现错位？ #

在你原来的代码中，虽然两个div的底部已经对齐到父容器底部，但文本在div内部是按照默认的基线排版的——大字体的基线位置和小字体的基线位置存在差异，这就导致视觉上文本没有对齐。上面的几种方法要么让文本和自身容器底部贴合，要么强制文本之间的底部对齐，都能完美解决这个问题。

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