css - 为什么 Material 成分卡标题与底部对齐？

我正在制作一张包含用于Web的材料组件的卡，我希望我的模板布局能够将其所有数据包含在其中。

现在，当我使用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>

为什么即使我没有添加任何媒体内容，它也为媒体留出空间。

最佳答案

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

如果内容小于卡的高度，则内容将在底部对齐。

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

关于css - 为什么 Material 成分卡标题与底部对齐？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43375431/