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

Posted 2023-02-23

【中文标题】如何垂直对齐2种不同大小的文本？

【英文标题】：How to vertically align 2 different sizes of text?

【发布时间】：2011-04-29 05:15:21

【问题描述】：

我知道要将文本垂直对齐到块的中间，你将 line-height 设置为块的相同高度。

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

如何设置它，使两种大小的文本垂直对齐，以便较大的文本将位于低于较小文本的基线上？

【参考方案1】：

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

您可以使用百分比大小重新应用父级的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 

【参考方案3】：

这行得通

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>

【参考方案4】：

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

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

【参考方案5】：

在内联容器上试试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>

【讨论】：

而且我一直认为vertical-align: middle 只为table-cell 服务！

如果我想让第二个跨度正确浮动，这似乎失败了。然后它在顶部对齐：jsfiddle 任何想法如何使它与浮动一起工作？

父div是否需要设置height和line-height样式？

【参考方案6】：

您看到的功能是正确的，因为“垂直对齐”的默认值是基线。看来您想要vertical-align:top。还有其他选择。 请参阅W3Schools。

编辑 W3Schools 并没有清理他们的行为，而且看起来仍然是一个劣质的（充其量）信息来源。我现在使用sitepoint。滚动到站点首页的底部以访问其参考部分。

【讨论】：

我后来了解到 W3Schools 不是一个好的参考网站。请参阅w3fools.com 了解更多信息。

+1 对得出 W3S 是垃圾的结论表示支持。

【参考方案7】：

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

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

【讨论】：

在再次使用表格进行布局之前，我宁愿接受失败。

【参考方案8】：

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