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

Question

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

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

.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 网格来做到这一点？

谢谢。

Answer 1

只需删除

justify-items: center

（这将每个项目的内容对齐到该项目的中心）并为

justify-self: center

设置

.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>

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

问题描述投票：0回答：1

1个回答

最新问题

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

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1