javascript - 如何在同一行上水平动态对齐两个不同的文本大小

Question

是否可以用JS将两种不同大小的文字水平居中对齐？

.big {
    font-size: 60px;
}

.small {
    font-size: 20px;
}

<div class="parent">
    <span class="big">ABCD.EF</span>
    <span class="small">ABC</span>
</div>

困难的是:我需要动态地实现这一点，因为 ABCD.EF 可能会更改为更多或更少的字符数(即可能是 ABC.DE 或 A.BC...)

谢谢!

Answer 1

我认为您正在寻找的是 flexbox。我建议查看 this tutorial学习如何使用它。

如果您想以其他方式对齐元素，请使用 flex-direction: row;

.parent {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.big {
    font-size: 60px;
}

.small {
    font-size: 20px;
}

<div class="parent">
    <span class="big">ABCD.EF</span>
    <span class="small">ABC</span>
</div>