我从 2019 年 3 月开始尝试使用 Material Design Web 1.0。
使用 card 时和一个 button在其中，虽然按钮已设置为 mdc-card__actions--full-bleed 我发现无法将按钮文本居中。所以我的问题是:
本例中如何正确居中按钮文本？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https://fonts.gstatic.com; script-src 'unsafe-inline' https://unpkg.com; style-src 'unsafe-inline' https://unpkg.com https://fonts.googleapis.com"/>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.css" rel="stylesheet"/>
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
<style>
.my-card-content
{
padding: 16px;
}
</style>
</head>
<body>
<div class="mdc-card my-card-content">
<div class="mdc-card__actions mdc-card__actions--full-bleed">
<button class="mdc-button mdc-button--raised mdc-card__action mdc-card__action--button" tabindex="0">
<span class="mdc-button__label">Login</span>
</button>
</div>
</div>
</body>
</html>
最佳答案
你可以这样试试:
.mdc-button {
justify-content: center !important;
}
.my-card-content {
padding: 16px;
}
.mdc-button {
justify-content: center !important;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https://fonts.gstatic.com; script-src 'unsafe-inline' https://unpkg.com; style-src 'unsafe-inline' https://unpkg.com https://fonts.googleapis.com"/>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TMS Archiv login</title>
<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.css" rel="stylesheet"/>
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
</head>
<body>
<div class="mdc-card my-card-content">
<div class="mdc-card__actions mdc-card__actions--full-bleed">
<button class="mdc-button mdc-button--raised mdc-card__action mdc-card__action--button" tabindex="0">
<span class="mdc-button__label">Login</span>
</button>
</div>
</div>
</body>
</html> 关于html - Material 设计 Web 1.0 : How to center the (--full-bleed) button text within a card?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55965187/