我知道要将文本垂直居中于一个块内,需要设置行高与该块的高度相同。
但是,如果我有一句话中间有一个字是2em
大小。如果整个句子的行高与包含块相同,则大号文本将垂直对齐,而小号文本将与大号文本处于相同的基线上。
如何设置使得两种文字的垂直对齐,以便大号文本的基线低于小号文本的基线?
我知道要将文本垂直居中于一个块内,需要设置行高与该块的高度相同。
但是,如果我有一句话中间有一个字是2em
大小。如果整个句子的行高与包含块相同,则大号文本将垂直对齐,而小号文本将与大号文本处于相同的基线上。
如何设置使得两种文字的垂直对齐,以便大号文本的基线低于小号文本的基线?
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>
两个文本块必须具有相同的固定行高,并且设置了垂直对齐。
span{
vertical-align: bottom;
line-height: 50px;
}
简单的方法 - 使用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>
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
一种选择是使用表格,不同大小的文本位于自己的单元格中,并在每个单元格上使用align:middle。
这并不美观,也不适用于所有场合,但它很简单,并且适用于任何文本大小。
这个有效
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>
vertical-align: middle
只适用于table-cell
元素! - Robin van Baalenleading-trim
。 - undefined