我想这里应该有一个简单的解决办法，但我找不到。我想重新创建类似以下图像的内容：
请注意，物料行和数量行在详细信息标题下方居中，但其中包含的文本左对齐。以下是我的尝试：
.grid-container {
background: gray;
display: inline-grid;
justify-items: center;
align-content: center;
grid-template-columns: 1fr 1fr;
padding: 10px;
}
.details {
font-weight: bold;
grid-column: span 2;
}
.info {
text-align: left;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css" />
<title>Document</title>
</head>
<body>
<div class="grid-container">
<div class="details">Details</div>
<div class="info">Item</div>
<div class="info">Beans</div>
<div class="info">Quantity</div>
<div class="info">41</div>
</div>
</body>
</html>但是您可以看到，尽管内容正确居中，但文本不是左对齐的。有没有一种方法可以用CSS网格来实现这一点？
谢谢大家。
1条答案
按热度按时间jogvjijk1#
只需删除
justify-items: center（这会将每个项目的内容对齐到该项目的中心）并将justify-self: center设置为.details。试试看：