Question

我正在制作一张带有网络材料组件的卡片，我想让我的模板布局将所有数据放入其中。

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

即使我没有添加任何媒体内容，为什么还要留下媒体空间。

Answer 1

根据docs：

，这似乎是设计的

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

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

为什么材料组件卡片标题与底部对齐？

1 个答案: