水平居中一个 mdl 按钮

【问题标题】：Horizontally center a mdl-button水平居中一个 mdl 按钮
【发布时间】：2017-07-29 15:17:45
【问题描述】：

有没有一种简单的方法可以将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 时，mdl-grid 通常是定位事物的正确方法吗？

【问题讨论】：

标签： html css button material-design material-design-lite

【解决方案1】：

由于按钮是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>

【讨论】：