在 CSS 中跨 flexbox 容器对齐文本基线答案

【问题标题】：Aligning text baseline across flexbox containers in CSS在 CSS 中跨 flexbox 容器对齐文本基线
【发布时间】：2021-11-29 06:11:20
【问题描述】：

我想创建这个布局：

我可以使用 flexbox 和align-self: baseline：

<div style="background-color: #fce5cdff; display: flex; height: 4.35cm;">
  <div style="font-size: 24pt">Ferry to Brookfield</div>
  <div style="font-size: 96pt; align-self: baseline">3</div>
  <div style="font-size: 9pt; align-self: baseline">min</div>
</div>

This looks like (JSFiddle):

从这里，我不知道如何添加文本“leave in”，使其基线与文本“3 min”对齐。 Here's an attempt (JSFiddle).

如何在 CSS 中创建此布局？

【问题讨论】：

几乎不可能，字符字形应该在上下都有垂直空间。事实上，它已经融入了字体。
请注意，pt 用于打印，而不是用于网络。 w3.org/Style/Examples/007/units.en.html

标签： css flexbox css-grid

【解决方案1】：

试试这个...

<div style="background-color: #fce5cdff; display: flex; height: 4.35cm;">
    <div style="display: flex; flex-direction: row;justify-content: space-between">
        <div>
            <h1 style="font-size: 24pt;font-weight:300;margin-bottom:47px">Ferry to Brookfield</h1>
            <div style="font-size: 9pt; text-align: right;">leave in</div>
        </div>
        <div style="font-size: 96pt">3<span style="font-size:9pt">min</span></div>
    </div>
</div>

【讨论】：

【解决方案2】：

您可以使用absolute 定位和伪元素来做到这一点：

.wrapper{
  background-color: #fce5cdff;
  display: flex;
  height: 4.35cm;
  font-size: 24pt;
}
span{
  font-size: 96pt;
 line-height: 96pt;
 position: relative;
 margin-left: 2pt;
}
span::before {
  content: "leave in";
  position: absolute;
  font-size: 10pt;
  bottom: 6pt;
  left: -6ch;
}
span::after {
  content: "min";
  position: absolute;
  font-size: 10pt;
  bottom: 6pt;
  right: -3ch;
}

<div class="wrapper">
    Ferry to Brookfield <span>3</span>
</div>

【讨论】：