Material Design Web 1.0：如何在卡片中居中（--full-bleed）按钮文本？答案

【问题标题】：Material Design Web 1.0: How to center the (--full-bleed) button text within a card?Material Design Web 1.0：如何在卡片中居中（--full-bleed）按钮文本？
【发布时间】：2019-05-03 07:33:04
【问题描述】：

我从 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>

【问题讨论】：

你想使用全角按钮吗？

标签： html css button material-design

【解决方案1】：

你可以试试这个方法：

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

【讨论】：

好的，但只能使用 !important - 这对我来说看起来很奇怪，因为我不希望谷歌框架能做到这一点。最后但并非最不重要的一点是，我使用 .my-mdc-button 作为样式以不干扰材质类。

【解决方案2】：

这是因为 .mdc-card__action--button 类具有 justify-content: space-between; 属性和值，因此如果您想将该文本居中，您应该使用以下代码覆盖此属性：

.mdc-card__action--button {
  justify-content: center !important;
}

【讨论】：