我想这里应该有一个简单的解决办法,但我找不到。我想重新创建类似以下图像的内容:
请注意,物料行和数量行在详细信息标题下方居中,但其中包含的文本左对齐。以下是我的尝试:
.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
。试试看: