怎么样才能让上下两行文本对齐？

Question

要求是测试和下面的数字垂直居中，亿元不要参与对齐，就跟在数字后面就行。试着用伪元素发现没用。

Answer 1

单位脱离文档流，用定位吧，css示例如下：

.unit {
  position: absolute;
  right: -2em;
  bottom: 0;
}

Answer 2

想到了两个办法

1. 左边是text-align:right，然后左右是底部对齐
2. 测试是text-align:right，加个padding-right: 2em

楼上的方法，应该和 2 一样，只不过用的 absolute 来实现的 2em

Answer 3

用 Pug + TailwindCSS 表示下：

.flex.items-center
  span 测试
  strong.text-2xl 216.11
  span.inline-block.pt-2 亿元

Answer 4

这样子：

1. 外层容器使用 flex 设置垂直居中。
2. 内层元素设置相对定位 position:relative; 设置文本居中 text-align:center;
3. 数字之后的文本，使用绝对定位 position: absolute。
   因为不确定数字后文本长度，所以使用left:100%，同时使用white-space: nowrap;避免文本自动换行，这里换行后会自动上移。

<div id="text-test1">
    <div class="inner">
        <div>测试</div>
        <div>216.11</div>
        <div class="unit"> 亿元</div>
    </div>
</div>

CSS:

        #text-test1 {
            width: 50%;
            position: relative;
            height: 10vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #text-test1 .inner {
            text-align: center;
            position: relative;
        }

        #text-test1 .inner .unit {
            width: auto;
            position: absolute;
            bottom: 0;
            left: 100%;
            white-space: nowrap;
        }