如何混合具有不同字体大小的垂直居中元素并保持一致的行高？ [英] How can I mix vertically-centered elements with different font sizes and retain consistent line height?

问题描述

当在容器内部使用 vertical-align：middle 混合元素的字体大小时，容器的高度可以大于个别元素。这是一个小提琴：

  {line-height：20px; font-size：14px;}。{font-size：0.9em; vertical-align：middle;}  

 < div class = body> < div class =why-not-twenty-px>包含div的高度 

/ div>

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

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

解决方案

§10.8说明了线框的高度如何计算：

如内联格式化上下文，用户
代理将内联级别框流入 line
boxes 。线框的高度确定如下：




1. 
   

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

   
   

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




2. 
   

   内嵌级别的方块会根据
   'vertical-align'属性。

   
   

   .smaller 有 vertical-align ：middle ，表示

   
   

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

   
   




3. 
   

   是最上面的盒子顶部和
   之间的距离最低的盒子底部。

   
   

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

然后，如其他答案解释，解决问题的方法是减少 .smaller ' line-height ：

但是，还有一个替代解决方案，无需修改 line-height ：可以添加负边距，以防止 .smaller 增加行框的高度。

如上所述，内联框的高度为 line-height ，因此为了使边距起作用， display：inline-block 还需要：

计算行框中每个行内级框的高度。对于
[...] inline-block元素[...]这是他们的保证金
盒子的高度。

注意，这个解决方案不会破坏对齐方式，因为 .smaller 有 vartical-align：middle ，如果我们在 margin-top 和 margin-bottom 中使用相同的金额， p>

>

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

  .smaller {
 vertical-align：middle; 
 display：inline-block; 
 margin：-1em 0; 
} 
  

  body {line-height：20px; font-size：14px;}。{font-size：0.9em; vertical-align：middle; display：inline-block; margin：-1em 0;}  

 < div class = body> < div class =why-not-twenty-px>也不< span class =smaller>& bull;< / span> mal< / div> < div class =why-not-sixty-px>多线多线多线< span class =smaller>& bull;< / span>多线多线多线多线多线多线多线多线多线多线多线多线多线多线多线< / div>  

When you mix font-sizes of elements with vertical-align: middle inside of a container, the container's height can be larger than the line-height or height of either individual element. Here is a fiddle:

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>

In this example, the two containing divs are 21px and 61px instead of 20px and 60px.

How can I retain a container height that is a multiple of the line-height when mixing in an element like .smaller? .smaller must be vertically centered on the line. Ideally, any solution would only involve CSS changes to .smaller.

解决方案

§10.8 explains how the height of the line boxes is calculated:

As described in the section on inline formatting contexts, user agents flow inline-level boxes into a vertical stack of line boxes. The height of a line box is determined as follows:

1. The height of each inline-level box in the line box is calculated. [...] For inline boxes, this is their 'line-height'

   Since .smaller inherits line-height: 20px and is an inline box (i.e. non-replaced with display: inline), its height is 20px

2. The inline-level boxes are aligned vertically according to their 'vertical-align' property.

   .smaller has vertical-align: middle, which means

   Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.

3. The line box height is the distance between the uppermost box top and the lowermost box bottom.

So both the text and .smaller have a height of 20px, but they have different alignment. Therefore, the line box grows:

Then, as other answers explain, a way to solve the problem is reducing .smaller's line-height:

However, there is an alternative solution, without modifying line-height: negative margins can be added to prevent .smaller from increasing the height of the line box.

As quoted above, the height of an inline box is its line-height, so to make the margins work, display: inline-block is also needed:

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.

Note this solution won't break the alignment, because since .smaller has vartical-align: middle, if we use the same amount in margin-top and margin-bottom, it will remain centered.

To summarize, you can use this code:

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

这篇关于如何混合具有不同字体大小的垂直居中元素并保持一致的行高？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！