水平居中一個MDDL按鈕

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輔助類來實現。

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