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

Question

在弹性框中,如何在具有两种不同字体大小的两个不同div中垂直对齐文本的底边？

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

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

谢谢!

Answer 1

您可以使用:

align-items: baseline;

使用类似基线的值可以使项目对齐,例如它们的基线对齐.


正如Mozilla Developers Networks所描述的align-items: baseline;:

所有弹性项目的基线(前缘或后缘取决于弹性方向属性)彼此对齐.占据最大空间(垂直于布局轴)的弹性项遵循弹性开始规则.然后,所有剩余元素的基线与该元素的基线对齐.

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