CSS Grid实现内容居中且文本左对齐的方法求助

可以用CSS Grid实现你想要的布局，问题出在justify-items: center的设置上——它会让每个网格项在单元格内居中，导致文本左对齐的效果不明显。调整后的代码如下：

修改后的CSS代码 #

.grid-container {
  background: gray;
  display: inline-grid;
  justify-content: center; /* 让整个网格整体居中 */
  grid-template-columns: auto auto;
  padding: 10px;
}

.details {
  font-weight: bold;
  grid-column: span 2;
  text-align: center; /* 标题文本居中 */
}

.info {
  text-align: left; /* 单元格内文本左对齐 */
}

对应的HTML代码 #

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

关键调整说明 #

• 把justify-items: center改为justify-content: center：前者控制网格项在单元格内的对齐，后者控制整个网格容器的内容在父容器中居中，这样下方的两列内容会整体居中，同时每列内的文本可以左对齐。
• 给.details添加text-align: center，让标题保持居中显示。

内容的提问来源于stack exchange，提问作者Evan