我有一个 <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 来完成,但这似乎有点过分了......
最佳答案
因为你不想使用 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>
关于html - 使用网格单元格对齐在 div 内跨度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49019953/