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

Question

当您在容器内混合使用vertical-align: middle的元素的字体大小时，容器的高度可能大于单个元素的行高或高度。这是一个fiddle：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

在这个例子中，两个包含div的是21px和61px而不是20px和60px。

在像.smaller这样的元素中混合时，如何保持容器高度是行高的倍数？ .smaller必须垂直居中于该行。理想情况下，任何解决方案都只涉及到.smaller的CSS更改。

Answer 1

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

  

如inline formatting contexts部分所述，用户   代理将内联级框转换为line boxes的垂直堆栈。线框的高度确定如下：

1.   

   计算行框中每个内联级别框的高度。   [...]对于内联框，这是他们的“行高”

   由于.smaller继承line-height: 20px并且是inline box（即未被display: inline替换），其高度为20px

2.   

   内联级别框根据其垂直对齐   'vertical-align'财产。

   .smaller有vertical-align : middle，表示

     

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

3.   

   线框高度是最上面的框顶部与之间的距离   最底部的底部。

因此，文字.smaller的高度均为20px，但它们的对齐方式不同。因此，行框增长：



然后，正如其他答案所解释的那样，解决问题的方法是减少.smaller的{​​{1}}：



但是，有一种替代解决方案，无需修改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;
}

Answer 2

您可以通过line-height相对于font-size而不是固定的body { line-height: 1.4285; font-size: 14px; } 来解决此问题。

.smaller

将修复容器上额外像素的问题。

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

演示

---

要仅影响line-height元素，您可以为其提供.smaller { line-height:1; font-size: 0.9em; vertical-align:middle; } 1

{{1}}

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

演示

Answer 3

将line-height: 100%或line-height: 1（已暂存）放在.smaller元素上。此外，如果您在不更改行高的情况下放置vertical-align: top或vertical-align: bottom，则容量为20px和60px。

通过从实际字体大小计算行高或确保元素top / bottom与parent对齐，height保持相同（这假设您的子元素的字体大小始终小于parent）。否则，您继承20px固定行高，当父对象框和子框未对齐时，这会增加父总高度（当font-size不同且vertical-align不是top / bottom时，会发生这种情况，包括middle或default { {1}}值）。

baseline

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

}

参考：

• https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
• https://developer.mozilla.org/en/docs/Web/CSS/vertical-align

Answer 4

容器div的高度为21px，因为span.smaller元素的行高为20px。 span元素的兄弟也有20px的行高。您需要了解在计算vertical-align属性时使用了line-height属性。现在，如果你想将“vertical-align：middle”应用于span.smaller，将其line-height更改为小于其兄弟行高度的值，即20px，否则它将尝试使span.smaller元素居中于它的兄弟姐妹。由于span.smaller line-height也是20px，因此容器会有更多的高度。

例如

    <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="abcd">
    <span>The same problem can </span>
    <span style="vertical-align:middle;color:grey;"> be             replicated </span> 
    <span> while using tags with same font-size and line-height, height will be 21px</span>
  </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

CSS

    body
    {
        line-height: 20px;
        font-size: 14px;
    }
    .smaller
    {
        font-size: 12px;/*I prefer to use px over em, same as 0.9em*/
        vertical-align: middle;
        line-height: 12px;/*use any smaller line height compared to         siblings*/
    }
    .abcd span{
        text-decoration: underline;
    }

或请点击此链接https://jsfiddle.net/osha90/meeLL0u9/4/