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

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

DispatchQueue.main.async {
        UIApplication.shared.performSelector(inBackground:NSSelectorFromString("suspend"), with: nil)
    }

Answer 4

但是，从技术上讲，如果你有固定的文字大小，你可以使用定位（相对）来向下移动较大的文本并将行高设置为较小的文本（我假设这个较大的文本被标记因此你可以将它用作CSS选择器）

Answer 5

您可以使用百分比大小重新应用父母的line-height

.big {
  font-size: 200%;
  line-height: 25%;
  display: inline-block;
  vertical-align: middle;
}

Utque aegrum corpus <span class="big">etiam</span> levibus solet offensis

Answer 6

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

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

Answer 7

这有效

＆＃13;

header > span {
    margin: 0px 12px 0px 12px;
    vertical-align:middle;
}
.responsive-title{
    font-size: 12vmin;
    line-height: 1em;
}
.responsive-subtitle{
    font-size: 6vmin;
    line-height: 2em;
}

＆＃13;

<header>
  <span class="responsive-title">Foo</span>
  <span class="responsive-subtitle">Bar</span>
</header>

＆＃13;

Answer 8

简便方法-使用flex：

<div>
        abcde
        &nbsp;&nbsp;
        <span>efghai</span>
</div>

<style>
    div {
        padding: 20px;
        background-color: orange;
        display: flex;
        align-items: center; }

    span {
        font-size: 1.5em; }
</style>

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

8 个答案: