mdl-buttonを水平に配置する

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を使用せずに、Webページ上でのみ水平方向の中央。または、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>