为什么 Material 组件卡标题对齐到底部？

Question

我正在制作一张带有 material 网络组件的卡片，我希望我的模板布局能够包含所有数据。

现在当我使用 mdc-card__title 或 subtitle 时，它们都与我不想要的卡片底部对齐。

我做错了什么吗？

查看代码获取帮助：

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

为什么即使我没有添加任何媒体内容，它也会为媒体留下 space。

Answer 1

这似乎是设计使然，根据 docs:

Content will be bottom-aligned if it's smaller than the height of the card.

如果您想将其更改为顶部对齐，应该可以将 .mdc-card 的 justify-content 样式覆盖为 flex-start。

为什么 Material 组件卡标题对齐到底部？

why the Material components card title aligned to bottom?

css

material-design

material-components