一尘不染

如何垂直对齐2种不同大小的文本?

css

我知道要将文本垂直对齐到块的中间,您可以将line-height设置为与块相同的高度。

但是,如果我的句子中间有一个单词,那就是2em。如果整个句子的行高与包含块的行高相同,则较大的文本在垂直方向上对齐,但是较小的文本与较大的文本在同一基线上。

如何设置它以便两个文本的大小都垂直对齐,以便较大的文本位于比较小的文本低的基线上?


阅读 313

收藏
2020-05-16

共1个答案

一尘不染

尝试vertical-align:middle;内联容器?

编辑:它可以工作,但您的所有文本必须在嵌入式容器中,如下所示:

    <div style="height:100px; line-height:100px; background:#EEE;">

        <span style="vertical-align:middle;">test</span>

        <span style="font-size:2em; vertical-align:middle;">test</span>

    </div>
2020-05-16