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

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

我知道垂直对齐可以用弹性框完成，但这似乎有点矫枉过正......

Answer 1

因为您不想使用 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>

Answer 2

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>