CSS 如何垂直对齐 2 种不同大小的文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3997983/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to vertically align 2 different sizes of text?
提问by JD Isaacks
I know to vertically align text to the middle of a block, you set the line-height to the same height of the block.
我知道要将文本垂直对齐到块的中间，您可以将行高设置为与块相同的高度。
However, if I have a sentence with a word in the middle, that is 2em. If the entire sentence has a line-height the same as the containing block, then the larger text is vertically aligned but the smaller text is on the same baseline as the larger text.
但是，如果我有一个句子中间有一个词，那就是2em。如果整个句子的行高与包含块相同，则较大的文本垂直对齐，但较小的文本与较大的文本在同一基线上。
How can I set it so both sizes of text are vertically aligned, so the larger text will be on a baseline lower than the smaller text?
如何设置它使两种文本大小都垂直对齐，以便较大文本的基线低于较小文本？
回答by MatTheCat
Try vertical-align:middle;on inline containers?
尝试vertical-align:middle;使用内联容器？
EDIT : it works but all your text must be in an inline container, like this :
编辑：它有效，但您的所有文本都必须在内联容器中，如下所示：
<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>回答by DwB
The functionality you are seeing is correct because the default for "vertical-align" is baseline. It appears that you want vertical-align:top. There are other options.
See here at W3Schools.
您看到的功能是正确的，因为“垂直对齐”的默认值是基线。看来你想要vertical-align:top. 还有其他选择。请参阅W3Schools此处。
EditW3Schools has not cleaned up their act and still, appear, to be a shoddy (at best) source of information. I now use sitepoint. Scroll to the bottom of the sitepoint front page to access their reference sections.
编辑W3Schools 还没有清理他们的行为，但似乎仍然是一个劣质（充其量）的信息来源。我现在使用sitepoint。滚动到站点首页的底部以访问其参考部分。
回答by Matoeil
the two set of text must have the same fixed line-height and the vertical-align set
两组文本必须具有相同的固定行高和垂直对齐集
span{
vertical-align: bottom;
line-height: 50px;
}
回答by Creaforge
You can use percentage sizes to reapply the parent's line-height
您可以使用百分比大小重新应用父级的 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 回答by Alex
You technically can't, however, if you have fixed text sizes you could use positioning (relative) to move the larger text down and set the line-height to the smaller text (I'm presuming this larger text is marked up as such so you can use that as a CSS selector)
但是，从技术上讲，如果您有固定的文本大小，您可以使用定位（相对）将较大的文本向下移动并将行高设置为较小的文本（我假设这个较大的文本被标记为这样因此您可以将其用作 CSS 选择器）
回答by David M?rtensson
An option is to use a table there the different sized texts are in their own cells and use align:middle on each cell.
一个选项是使用一个表格，不同大小的文本在它们自己的单元格中，并在每个单元格上使用 align:middle 。
Its not pretty and does not work for all occasions, but it is simple and works with any text size.
它不漂亮，并不适用于所有场合，但它很简单，适用于任何文本大小。
回答by Tomas Macek
Easy way - use flex:
简单的方法 - 使用 flex：
<div>
abcde
<span>efghai</span>
</div>
<style>
div {
padding: 20px;
background-color: orange;
display: flex;
align-items: center; }
span {
font-size: 1.5em; }
</style>
回答by Ronnie Royston
This works
这有效
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>