MDC: Как центрировать ячейку? - PullRequest
Новая
       32

MDC: Как центрировать ячейку?

0 голосов
/ 05 мая 2019

В документе написано, что "Сетка по умолчанию выровнена по центру".

Однако следующий код не центрирует ячейку: 

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

enter image description here

1 Ответ

0 голосов
/ 05 мая 2019

Сетка по умолчанию выровнена по центру

Да, это так. Сама сетка центрирована (красная граница), проверьте пример ниже. Я думаю, что это то, что сетка должна быть. Он определяет плитки и позволяет вам положить компонент, так что это называется сетка. 

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

Если вы действительно хотите, чтобы центр ячейки был выровнен внутри разметки сетки, пусть ячейка охватывает все столбцы.

Мы не уверены, что будет размещено в сетке или как вы хотите организовать контент, в противном случае мы можем предложить другой компонент, который может соответствовать вашим потребностям.

...