垂直对齐底部 div 与不同大小的文本

Posted 2023-03-05

【中文标题】垂直对齐底部 div 与不同大小的文本

【英文标题】：Vertical align bottom divs with text of different sizes

【发布时间】：2014-10-22 18:29:33

【问题描述】：

在 flex 框中，如何垂直对齐具有两种不同字体大小的两个不同 div 中的文本底部边缘？

这是一个非常简单的 jsfiddle： http://jsfiddle.net/aegh74dr/1/

您会注意到弹性框中的两个 div 包含不同大小的字体。 align-items 属性设置为 flex-end，但两个不同的 div 底部不对齐。

谢谢！

【问题讨论】：

对齐项目：基线；

这行得通！谢谢！！！

【参考方案1】：

我设法让他们对此表示赞同：

div.large 
    font-size: 32px;
    height: 32px;


div.small 
    font-size: 16px;
    line-height: .92em;
    height: 16px;

【讨论】：

我不会推荐这个解决方案。更改font-size 后，您还必须更改line-height。

【参考方案2】：

你可以使用：

align-items: baseline;

使用像基线这样的值可以对齐项目，例如它们的基线对齐。 正如 Mozilla Developers Networks 所描述的 align-items: baseline; ：

基线（前缘或后缘取决于 所有 flex 项的 flex-direction 属性）都与每个项对齐 其他。占据空间最多的弹性项目，垂直于 布局轴，遵循 flex-start 规则。所有的基线 然后剩余的元素与该元素的基线对齐。

演示 http://jsfiddle.net/a_incarnati/aegh74dr/2/

【讨论】：

这行得通！我完全忽略了align-items 属性。谢谢！