MDC：如何使单元格居中？

Question

document里面写着"The grid is by default center aligned.".

但是，下面的代码没有使单元格居中：

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

Answer 1

The grid is by default center aligned

是的，是的。网格本身居中（红色边框），请查看下面的示例。我认为这就是网格应该是的样子。它定义了 tiles 并让你在上面放置组件，所以它被称为 grid。

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

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

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

MDC：如何使单元格居中？

MDC: How to center a cell?

html

css

mdc-components