html里用行高自动居中,html – 如何混合垂直居中的元素与不同的字体大小和保持一致的行高？...

§10.8解释了如何计算行框的高度：

As described in the section on 07001, user

agents flow inline-level boxes into a vertical stack of 07002. The height of a line box is determined as follows:

>

The height of each inline-level box in the line box is calculated.

[…] For inline boxes, this is their ‘line-height’

由于.smaller继承了line-height：20px，是inline box(即不替换为display：inline)，它的高度为20px

>

The inline-level boxes are aligned vertically according to their

07004 property.

中间，这意味着

Align the vertical midpoint of the box with the baseline of the parent

box plus half the x-height of the parent.

>

The line box height is the distance between the uppermost box top and

the lowermost box bottom.

所以文本和.smaller的高度都是20px，但是它们的对齐方式不一样。因此，线框增长：

然后，正如其他答案所解释的，解决问题的方法是减少.smaller的行高：

但是，有一个替代方案，不修改行高：可以添加负边距以防止.smaller增加行框的高度。

如上所述，内联框的高度是其行高，因此为了使边距起作用，显示：还需要inline-block：

The height of each inline-level box in the line box is calculated. For

[…] inline-block elements […] this is the height of their margin

box.

注意这个解决方案不会打破对齐，因为.smaller有vartical-align：middle，如果我们在margin-top和margin-bottom中使用相同的数量，它将保持居中。

总而言之，您可以使用以下代码：

.smaller {

vertical-align: middle;

display: inline-block;

margin: -1em 0;

}

body {

line-height: 20px;

font-size: 14px;

}

.smaller {

font-size: 0.9em;

vertical-align: middle;

display: inline-block;

margin: -1em 0;

}

nor•mal

multiline multiline multiline multiline multiline multiline • multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline

multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline