跨度在 div 内，网格单元格对齐

Question

我在网格中的 <div> 中有一个 <span>，例如：

.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 可能是最简单的方法。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 50px;
  border-top: 1px solid rgba(0, 0, 0, 0.13);
}
.label {
  border-left: 1px solid rgba(0, 0, 0, 0.13);
  display: flex;
  align-items: center;
  justify-content: center;
}

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

Answer 2

因为你不想使用 flexbox，所以你可以在 .label 中设置 display:grid 并在 span

中设置 align-self

.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>

跨度在 div 内，网格单元格对齐

Span within div with grid cell alignment

html

css

css-grid