如何使用 Materialize CSS 將按鈕居中對齊？

Question

我似乎無法在 Materialise 網站上找到任何關於元素定位的文檔。 誰能幫我把這個按鈕居中？ 提前致謝。

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

Answer 1

垂直對齊：
使用包裝器並為包裝器提供一個.valign-wrapper

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

水平對齊：
在要居中的元素上使用.left-align 、 .right-align 、 .center-align 。

請參閱文檔。

Answer 2

您可以使用 materialize 類 center-align 將按鈕居中，但在<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>

Answer 3

將 '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' 類。