MDC: How to center a cell?

Question

It is written in document that "The grid is by default center aligned.".

However, the following code does not center the cell:

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

Please add a working example here in SO ( The button next to the image icon in th editor) or fiddle instead of a screenshot. — Christopher Dosin, May 05 '19 at 10:33
@ChristopherDosin I added it but you need to prepare an image named image.png. — , May 05 '19 at 10:52

Mr. Brickowski · Accepted Answer · 2019-05-05T11:28:37.010

The grid is by default center aligned

Yes, it is. The grid itself is centered (the red border), check below example. I think it is what a grid suppose to be. It define tiles and let you put component on it, so it is called 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>

If you really want a cell center aligned inside a grid layout, let the cell span across all columns.

We are not sure what is going to be put on the grid, or how you want to organize the content, otherwise we may suggest other component that might fit your needs.

MDC: How to center a cell?

1 Answers1