如何垂直alignment2个不同大小的文本?

我知道要垂直alignment文本到块的中间,您将行高设置为与块的高度相同。

但是,如果我在中间有一句话,那就是2em 。 如果整个句子的行高与包含块相同,则较大的文本将垂直alignment,但较小的文本与较大的文本位于同一基线上。

我如何设置它,使两个文本的大小是垂直alignment的,所以较大的文本将在一个比较小的文本低的基线?

尝试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> 

您所看到的function是正确的,因为“垂直alignment”的默认值是基线。 看起来你想要vertical-align:top 。 还有其他的select。 在W3Schools看到这里。

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

但是,在技术上,不能,如果你有固定的文本大小,你可以使用定位(相对)来移动较大的文本,并将行高设置为较小的文本(我假设这个较大的文本被标记为这样所以你可以使用它作为一个CSSselect器)

一个选项是使用一个表,其中不同大小的文本在他们自己的单元格中,并在每个单元格上使用align:middle。

它不漂亮,不适用于所有场合,但它很简单,适用于任何文字大小。

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

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