html - 将 mdl 按钮水平居中

有没有一种简单的方法可以将 mdl-button 水平居中？一个这样的按钮:

<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
  <i class="material-icons">add</i>
</button>

在不使用 mdl-grid 的情况下仅在网页上水平居中。或者 mdl-grid 是使用 MDL 时定位事物的正确方法吗？

最佳答案

由于按钮是 inline-block ，最简单的方法是将 text-align: center; 应用于父元素。如果您不想使用网格，您可以使用 .center-align 辅助类来实现。

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet"/>

<div class="center-align">
  <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
    <i class="material-icons">add</i>
  </button>
</div>

关于html - 将 mdl 按钮水平居中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42681776/