如何将具有不同字体大小的垂直居中元素混合并保持一致的线高？

Question

将元素的字体大小与vertical-align: middle容器内部混合时,容器的高度可能大于单个元素的行高或高度.这是一个小提琴:

body {
  line-height: 20px;
  font-size: 14px;
}
.smaller {
  font-size: 0.9em;
  vertical-align: middle;
}

<div class="body">
  <div class="why-not-twenty-px">
    containing div has height <span class="smaller">&bull;</span> of 21px, not 20px
  </div>
  <div class="why-not-sixty-px">
    containing div has height of 61 px, not 60px multiline multiline multiline multiline multiline multiline <span class="smaller">&bull;</span> multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline
  </div>
</div>

在这个例子中,两个包含div是21px和61px而不是20px和60px.

在混合元素时,如何保持容器高度是线高的倍数.smaller？.smaller必须在线上垂直居中.理想情况下,任何解决方案都只涉及CSS更改.smaller.

Answer 1

§10.8解释了如何计算线框的高度:

如关于内联格式化上下文的部分所述,用户代理将内联级别框插入到垂直堆栈的行框中.线框的高度确定如下:

1. 计算行框中每个内联级别框的高度.[...]对于内联盒子,这是他们的"线高"

   由于.smaller继承line-height: 20px并且是内联框(即未替换display: inline),其高度为20px

2. 内联级框根据其 "垂直对齐"属性垂直对齐.

   .smaller有,这意味着vertical-align: middle

   将框的垂直中点与父框的基线加上父框的x高度的一半对齐.

3. 线盒高度是最上面的盒子顶部和最下面的盒子底部之间的距离.

所以文本.smaller都有高度20px,但它们有不同的对齐方式.因此,线框增长:

然后,其他的答案解释,解决问题的方式是减少.smaller的line-height:

但是,有一种替代解决方案,无需修改line-height:可以添加负边距以防止.smaller增加线框的高度.

如上所述,内联框的高度是它line-height,因此display: inline-block还需要使边距有效:

计算行框中每个内联级别框的高度.对于[...]内联块元素[...],这是它们边距框的高度.

请注意,此解决方案不会打破对齐,因为自从.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;
}

<div class="body">
  <div class="why-not-twenty-px">
    nor<span class="smaller">&bull;</span>mal
  </div>
  <div class="why-not-sixty-px">
    multiline multiline multiline multiline multiline multiline <span class="smaller">&bull;</span> 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
  </div>
</div>

Answer 2

你可以通过使line-height相对font-size而不是固定的相对来解决这个问题.

body {
    line-height: 1.4285;
    font-size: 14px;
}

将解决容器上额外像素的问题.

演示http://jsfiddle.net/gaby/b5zgpktj/

要仅影响.smaller元素,您可以给它line-height1

.smaller
{
    line-height:1;
    font-size: 0.9em;
    vertical-align:middle;
}

演示http://jsfiddle.net/gaby/b5zgpktj/1/