将文本垂直对齐到 Flexbox 上的 div 顶部

Question

我有一个带有 div 和 span 的 flex div，我不想修改它的结构。

.Flex {
  display: flex;
  background: lightgray;
  height: 300px;
}

.Square {
  width: 30px;
  height: 30px;
  background: black;
}

.Text {
  font-family: "Arial";
  font-size: 40px;
  background: tan;
}

<div class="Flex">
  <div class="Square"></div>
  <span class="Text">Title</span>
</div>

我正在尝试将文本“T”的顶部与 Flex div 的顶部对齐，如下图所示：

但是我不能。 align-content: flex-start 会将所有子项对齐到顶部，但跨度内的文本与 div 的顶部仍有一定距离。

如何实现这一目标？

Answer 1

在你的文本的css中添加一个属性：（你可以根据你想要的文本的位置来修改这个值，越高，文本离顶部边缘的空间越大）

line-height: 0.75;

.Flex {
  display: flex;
  background: lightgray;
  height: 300px;
}

.Square {
  width: 30px;
  height: 30px;
  background: black;
}

.Text {
  font-family: "Arial";
  font-size: 40px;
  background: tan;
  line-height: 0.75;
  }

<div class="Flex">
  <div class="Square"></div>
  <span class="Text">Title</span>
</div>