水平居中一个mdl按钮

Question

有一种简单的方法可以水平居中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时正确定位事物的正确方法吗？

Answer 1

由于按钮为inline-block，因此最简单的方法是将text-align: center;应用于父元素。如果您不想使用网格，可以使用.center-align帮助程序类执行此操作。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;