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

Question

我知道要将文本垂直对齐到块的中间,将行高设置为块的相同高度.

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

如何设置它以使两个文本大小都垂直对齐,因此较大的文本将位于低于较小文本的基线上？

Answer 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>

Answer 2

您看到的功能是正确的,因为"vertical-align"的默认值是基线.看来你想要vertical-align:top.还有其他选择.在W3Schools看到这里.

编辑 W3Schools还没有清理他们的行为,而且看起来仍然是一种伪劣的(最好的)信息来源.我现在使用sitepoint.滚动到站点点首页的底部以访问其参考部分.

Answer 3

两组文本必须具有相同的固定行高和垂直对齐集

 span{
     vertical-align: bottom;
     line-height: 50px;
}