CSS 网格：居中内容和左对齐文本

3周前#CSS

我认为这里应该有一个简单的解决方案，但我找不到。 我想重新创建类似下图的内容：

请注意项目和数量行如何在详细信息标题下方居中，但其中包含的文本是左对齐的。 这是我的尝试：

.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网格来实现这一点？
非常感谢。

回答
A
Ariane Torp
3周前

只需删除 justify-items: center（这会将每个项目的内容对齐到该项目的中心）并设置 justify-self: center for .details。

尝试一下：

.grid-container {
  background: gray;
  display: inline-grid;
  align-content: center;
  grid-template-columns: 1fr 1fr;
  padding: 10px;
}

.details {
  font-weight: bold;
  grid-column: span 2;
  justify-self: center;
}

<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>
相关内容
Q

如何在聊天框中制作来自不同用户的消息

1个月前