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

我知道垂直对齐文本到块的中间，您将行高设置为与块的高度相同。如何垂直对齐2种不同大小的文本？

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

如何设置它使两个文本的大小都是垂直对齐的，因此较大的文本将位于比较小的文本更低的基线上？

2010-10-22 JD Isaacks

118

尝试vertical-align:middle; online containers？

编辑：它的工作原理，但所有的文字必须是一个内嵌的容器，就像这样：

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

来源

2010-10-22 14:54:09 MatTheCat

我一直以为'垂直-align：middle'只用于'table-cell'！ – 2014-10-30 21:20:05

如果我想让第二个跨度正确地浮动，这似乎失败了。然后它的顶部对齐：[jsfiddle]（http://jsfiddle.net/Lszdx2hd/）任何想法如何使它与浮动工作？ – philk 2014-10-31 23:27:44

是否有必要设置父div的高度和线条样式？ – lexeek 2015-11-24 01:26:57

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

来源

2010-10-22 14:53:30 Alex

你所看到的功能是正确的，因为默认的“垂直对齐“是基准。看起来你想要vertical-align:top。还有其他选项。请参阅W3Schools。

编辑 W3Schools还没有清理他们的行为，仍然表现为一种粗制滥造（最好）的信息来源。我现在使用sitepoint。滚动至站点首页的底部以访问其参考部分。

来源

2010-10-22 14:58:44 DwB

+10

我已经了解到W3Schools不是一个很好的参考站点。有关更多信息，请参阅http://w3fools.com/。 – DwB 2013-01-21 17:06:23

+1得出结论：W3S是一件垃圾。 – aefxx 2014-02-07 08:18:38

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

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

来源

2010-10-22 14:59:00

我宁愿在再次使用表格进行布局之前接受失败。 – 2010-10-22 15:00:35

两个组文本必须具有相同的固定线路，高度和垂直对齐的设定

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

来源

2017-09-05 08:36:57 Matoeil

这工作

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>

来源

2018-02-05 19:24:01

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

回答

相关问题