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

Question

我知道要将文本垂直居中于一个块内，需要设置行高与该块的高度相同。

但是，如果我有一句话中间有一个字是2em大小。如果整个句子的行高与包含块相同，则大号文本将垂直对齐，而小号文本将与大号文本处于相同的基线上。

如何设置使得两种文字的垂直对齐，以便大号文本的基线低于小号文本的基线？

- JD Isaacks

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>

- MatTheCat

---

我一直认为 vertical-align: middle 只适用于 table-cell 元素！ - Robin van Baalen

如果我想让第二个span右浮动，似乎会失败。那么它就会顶部对齐：jsfiddle有什么想法可以让它与浮动一起工作吗？ - philk

需要设置父级div的高度和行高样式吗？ - lexeek

纯几何垂直中心怎么样？小的“测试”上方的空白距离大的“测试”的顶线有4像素。小的“测试”下方的空白距离大的“测试”的底线有6像素。所以从几何意义上讲，小的“测试”并没有垂直居中于大的“测试”。如何实现垂直居中呢？ - undefined

@AlexanderMihailov 目前除非你确定你的字体的度量标准，否则这是不可能的。我相信将来你将能够使用 leading-trim。 - undefined

Answer 2

两个文本块必须具有相同的固定行高，并且设置了垂直对齐。

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

- Matoeil

Answer 3

您所看到的功能是正确的，因为“vertical-align”的默认值是基线。您似乎想要“vertical-align:top”。还有其他选项。请参见此处：W3Schools。

编辑：W3Schools仍然没有整改，看起来仍然是一个低劣的信息来源。我现在使用sitepoint。滚动到sitepoint首页底部以访问其参考部分。

- DwB

---

我后来得知W3Schools不是一个好的参考网站。请查看http://w3fools.com/以获取更多信息。 - DwB

+1 因为得出 W3S 是垃圾的结论而获得了点赞。 - aefxx

Answer 4

简单的方法 - 使用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>

- Tomas Macek

Answer 5

你技术上不能这样做，但是如果你有固定的文本大小，你可以使用相对定位来将较大的文本向下移动，并将行高设置为较小的文本（我假设较大的文本已经标记过了，所以你可以使用它作为CSS选择器）。

- Alex

Answer 6

你可以使用百分比大小来重新应用父元素的 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 

- GuCier

Answer 7

一种选择是使用表格，不同大小的文本位于自己的单元格中，并在每个单元格上使用align:middle。

这并不美观，也不适用于所有场合，但它很简单，并且适用于任何文本大小。

- David Mårtensson

---

我宁愿接受失败，也不再使用表格进行排版。 - JD Isaacks

Answer 8

这个有效

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;
}

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

- Ronnie Royston