0

文档中写着“网格默认居中对齐。”。

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

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

在此处输入图像描述

4

1 回答 1

0

网格默认居中对齐

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

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

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

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

于 2019-05-05T11:23:30.563 回答