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

Question

当您在容器内将元素的字体大小与vertical-align: middle 混合时，容器的高度可以大于任一单个元素的行高或高度。这是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>

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

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

Answer 1

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

如inline formatting contexts 部分所述，用户 代理将内联级别的框流到line boxes 的垂直堆栈中。一个line box的高度是这样确定的：

1. 计算line box中每个inline-level box的高度。 [...] 对于内联框，这是它们的“行高”

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

2. 内联级框根据它们的垂直排列 'vertical-align' 属性。

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

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

3. line box 高度是最上面的 box top 和 box top 之间的距离 最下面的盒子底部。

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

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

不过，还有一个替代方案，不用修改line-height：可以加负边距，防止.smaller增加行框高度。

如上所述，内联框的高度是它的line-height，所以要使边距起作用，还需要display: inline-block：

计算line box中每个inline-level 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;
}

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

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

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

Answer 3

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

通过根据实际字体大小计算行高或确保元素顶部/底部与父元素对齐，高度保持不变（这假设您的子元素始终具有小于父元素的字体大小）。否则，您继承 20px 固定行高，当父框和子框未对齐时，它会增加父总高度（当字体大小不同且垂直对齐不是顶部/底部时会发生这种情况，包括 middle 或默认 baseline值）。

body {
  line-height: 20px;
  font-size: 14px;
}
.smaller {
  font-size: 0.9em;
  line-height: 1 // or 100% 
  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>

参考：

• 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 元素的 line-height 为 20px。 span 元素的兄弟元素也有 20px 的行高。您需要了解在计算垂直对齐属性时使用 line-height 属性。现在，如果您想对 span.smaller 应用“vertical-align: middle”，请将其 line-height 更改为小于其兄弟 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/

Answer 5

line-height: 1em;

将此样式添加到.smaller，项目符号将垂直居中对齐。