如何让不同的字体大小保持在同一基线上？

Question

我通过在我的小单词容器上添加

margin-bottom

来完成这项工作，但我希望有另一种优雅/响应式的方法。

我尝试过的事情：

1. 我已经尝试过

   align-items: baseline

   与flexbox，但它只需要 第一个词并将其放在基线上，其他一切都是 线下。

2. 绝对定位所有内容并使用边距/浮动。 需要很多 努力维护不同的屏幕尺寸。

fid：http://jsfiddle.net/1d4pqvc6/1/

html:

 <div class="main">
  <span class="big">BIG</span>
  <span class="small">
    <span class="word">Sony A7III</span>
    <span class="word">16-35mm and 85mm</span>
    <span class="word">Nikon D810</span>
    <span class="word">Landscape and Moments</span>
    <span class="word">Photography and Film</span>
  </span>
  <div class="big">WORD</div>
</div>

<div class="line"></div>

CSS：

.center-title{
  position: absolute;
  /* top: 60%; */
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  align-content: flex-end;
  height: 300px;
  }
  
  
.main{
  position: relative;
  display: inline-block;
  height: initial;
  display: flex;
  flex-direction: row;
  align-content: flex-end;
  align-items: flex-end;




}
 
  .small{
    font-size: 1rem;
    font-family: "Crimson Text";
    font-style: italic;

    display: flex;
    flex-direction: column;

    align-items: flex-start;
    justify-content: flex-end;
   margin-bottom: 32px;
    }
 .big{
    font-size: 13rem;
    font-family: Jost;
    display: inline-block;

    line-height: 13rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;

  }
      .word{
      line-height: 1rem;
    }
  .line{
position: absolute;
    width: 100%;
    border: 1px solid red;
    height: 2px;
    top: 184px;
  }

Answer 1

不存在的flexbox属性align-items: cap-height将接近解决你的问题。

通常，您会转到父 div 并添加“align-items: benchmark”。但是，当文本换行时，这不起作用。 flex-box 键插入“align-items:baseline”的第一行，而不是包装值的底行。

所以从技术上讲，大和小确实有与第一行对齐的基线。看图：

我摆弄了你的解决方案并提出了一个相对位置的解决方案。我还删除了行高，因为弄乱它会增加复杂性（创建正交情况）。

.main{
  display: flex;
  flex-direction: row;
  position: relative;
  align-items: baseline;
}

.small{
  display: flex;
  flex-direction: column;
  position: relative; 
  bottom: calc( 4rem + (4 * 2px));
  /* ^ line height normal is 18px */
  font-family: "Crimson Text";
  font-style: italic;
}
.big{
  display: flex;
  flex-direction: column;
  display: inline-block;

  font-size: 13rem;
  font-family: Jost;
}

.line{
  position: absolute;
  width: 100%;
  border: 1px solid red;
  height: 2px;
  top: 200px;
}

此解决方案类似于您的保证金底部解决方案。 但现在我们可以从第一条线与基线对齐的基础开始构建。然后我们可以通过数学/有意调整来达到预期的结果。

这是一种结构化方法，比使用虚构值有很大改进；因为它允许在需要时以编程方式计算将来的调整。

CSS更改的结果：

很好的例子！用红线来传达问题！

希望有帮助，