Почему заголовок карты компонентов материала выровнен по низу?

Я делаю карточку с материальными компонентами для веба, и я хочу, чтобы в макете моего шаблона были все данные.

Теперь, когда я использую mdc-card__title или субтитры, они оба выравниваются по низу карты, что мне не нужно.

Что-то не так я делаю?

Смотрите код для помощи:

.demo-card{
 width:65%; max-height: 500px;
 position: absolute;
     margin: auto;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
}
<html>
<head>
 <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
 <link rel="stylesheet" href="main.css">
 <link rel="stylesheet"
      href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
</head>
<body>
 <div class="mdc-card demo-card">
         <section class="mdc-card__primary">
            <h1 class="mdc-card__title mdc-card__title--large">Title goes here</h1>
            <h2 class="mdc-card__subtitle">Subtitle here</h2>
          </section>
          <section class="mdc-card__supporting-text">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
            ea commodo consequat.
          </section>
 </div>
</body>
 
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
    <script>mdc.autoInit()</script>
</html>

Почему это оставляет место для медиа, даже если я не добавляю медиа контент?

Источник

1 ответ

Похоже, это было сделано в соответствии с документами:

Содержимое будет выровнено снизу, если оно меньше высоты карты.

Должно быть возможно переопределить .mdc-card"s justify-content стиль для flex-start если вы хотите изменить это на верхнее выравнивание.

Источник
Другие вопросы по тегам