如何在网格div中定位按钮

Question

<div className={classes.productSection}>
{available.map((product)=>
(<div key={product.id} className={product.availability? classes.productBox : classes.notavailBox}>
<h4>{product.user.companyName}</h4>
<p>{product.user.district}</p>
{product.availability && <button className={classes.cartButton}>Add</button> }
</div>
)
)}
</div>

这是样式

.productSection {
display: grid;
grid-gap: 1rem;
grid-template-columns: 20% 20% 20%;
justify-content: center;
animation: append-animate .5s linear;
margin-bottom: 1rem;

}
.productBox {
white-space: nowrap;
border: 1.5px solid gray;
padding: 10px;
overflow: hidden;
border-radius: 12px;
}

问题是我无法定位按钮。当使用绝对定位时，它的定位取决于主体而不是父元素。我需要在父div的右侧有一个垂直居中的按钮。

Answer 1

要根据父项将按钮定位为绝对，您需要将此属性添加到父项：

position: relative;

Answer 2

CSS网格的一个很酷的特性是，你可以使用你可以使用的属性，比如：

• 自我证明：开始；(通常为水平左(
• 自我证明：中心；(通常为水平中心(
• 自我辩护：结束；(通常向右水平(以及
• 自对准：开始；(通常为垂直顶部(
• 对齐自身：居中；(通常为垂直中心(
• 自对准：结束；(通常为垂直底部(

您将属性应用于具有display:grid的父元素的子元素。若要移动选定的子项，请试用它们。希望这能有所帮助。