代码之家 › 专栏 › 技术社区 › JD Isaacks

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

baseline vertical-alignment text css

JD Isaacks · 技术社区 · 15 年前

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

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

7 回复 | 直到 15 年前

143

rjmunro 11 年前

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

DwB 12 年前

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

W3Schools还没有清理他们的行为,而且看起来仍然是一个劣质(充其量)的信息源。我现在用 sitepoint

Matoeil 9 年前

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

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

Alex 15 年前

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

GuCier 7 年前

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

David Mårtensson 15 年前

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

Ronnie Smith 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>

Tomas Macek 7 年前

简单易用的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>