web-dev-qa-db-ja.com

マテリアライズCSSを使用してボタンを中央揃えするにはどうすればよいですか？

Materialize Webサイトで要素の配置に関するドキュメントを見つけることができないようです。誰でもこのボタンを中央に配置できますか？前もって感謝します。

<div id="div">

    <a class="waves-effect waves-light btn-large blue"><i class="material-icons right">cloud</i>Enter</a>

</div>

#div {
  width: 100%;
  height: 100vh;
}
htmlcssmaterialize
13
Lord Goderick

垂直アライメント：
ラッパーを使用して、ラッパーに.valign-wrapper

<div class="valign-wrapper">
  <h5>This should be vertically aligned</h5>
</div>

水平方向の配置：
つかいます .left-align、.right-align、.center-align中央揃えする要素上。

ドキュメント を参照してください。

14
Steven B.

Materializeクラスを中心に揃えてボタンを中央揃えできますが、<p>または<div>タグ。 <a>タグはインラインブロックタグです。

これがコードです。

<p class="center-align">
 <a class="waves-effect waves-light btn-large blue"><i class="material-icons right">cloud</i>Enter</a>
</p>
11
Niraj

「center」クラスを周囲のdivに追加：

<div id="div" class="row center">
   <a class="waves-effect waves-light btn-large blue"><i class="material-icons 
   right">cloud</i>Enter</a>
</div>

注-divにも 'row'クラスが必要です。

2
Darryl Dolan