MDC：如何使单元格居中？答案

【问题标题】：MDC: How to center a cell?MDC：如何使单元格居中？
【发布时间】：2019-05-05 06:46:04
【问题描述】：

document 中写道“网格默认居中对齐。”。

但是，以下代码不会使单元格居中：

<html>
<head>
<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>

<body>
  <div class="mdc-layout-grid">
    <div class="mdc-layout-grid__inner">
      <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">
        <div class="mdc-card my-card">
          <div class="my-card__media mdc-card__media mdc-card__media--16-9" style="background-image: url('image.png');">
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

【问题讨论】：

请在 SO 中添加一个工作示例（编辑器中图像图标旁边的按钮）或小提琴而不是屏幕截图。
@ChristopherDosin 我添加了它，但您需要准备一个名为 image.png 的图像。

标签： html css mdc-components

【解决方案1】：

网格默认居中对齐

是的，是的。网格本身居中（红色边框），请查看下面的示例。我认为这是一个网格应该是什么。它定义了瓦片，让你在上面放组件，所以它被称为网格。

<html>

<head>
  <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
  <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>

<body>
  <div class="mdc-layout-grid" style="width: 512px; border:2px solid red;">
    <div class="mdc-layout-grid__inner">
      <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-8">
        <div class="mdc-card my-card">
          <div class="my-card__media mdc-card__media mdc-card__media--16-9" style="background-color: green">
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

如果您确实希望单元格在网格布局内居中对齐，请让单元格跨越所有列。

我们不确定要在网格上放置什么，或者您希望如何组织内容，否则我们可能会建议其他可能适合您需求的组件。

【讨论】：