如何在水平线上

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>

Answer 2

将vertical-align: middle;添加到跨度。试试这个：

.big {
    font-size: 60px;
    vertical-align: middle;
}

.small {
    font-size: 20px;
    vertical-align: middle;
}

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

或者您可以定位父类中的所有跨度，如下所示：

.parent span {
    vertical-align: middle;
}