html - 使用网格单元格对齐在 div 内跨度

Question

我有一个 <span>在 <div> 内在网格中，例如:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 50px;
  border-top: 1px solid rgba(0, 0, 0, 0.13);
}
.label {
  align-self: center;
  border-left: 1px solid rgba(0, 0, 0, 0.13);
  padding-left: 15px;
  height: 100%;
}

<div class="container">
  <div class="label">
    <span>Temperature</span>
  </div>
  <button>Add</button>
</div>

第一个单元格的边框必须达到网格的顶部边框，并且内容必须在网格单元格中居中。我无法删除跨度，因为它来自进行本地化的组件。

我知道垂直对齐可以用 flexbox 来完成，但这似乎有点过分了......

Answer 1

因为你不想使用 flexbox，所以你可以在 .label 和 align-self 中设置 display:grid > 在 span

中

.container {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  grid-template-rows: 50px;
  border-top: 1px solid rgba(0, 0, 0, 0.13);
}
.label {
  display: grid;
  border-left: 1px solid rgba(0, 0, 0, 0.13);
  padding-left: 15px;
  height: 100%;
}
.label span {
  align-self: center;
  margin: auto /* optional */
}

<div class="container">
  <div class="label">
    <span>Temperature</span>
  </div>
  <button>Add</button>
</div>