如何使用Materialise 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

您可以使用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>

Answer 2

垂直对齐：
使用包装器并为包装器提供一类.valign-wrapper

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

水平对齐：
在要居中的元素上使用.left-align，.right-align，.center-align。

请参阅documentation。

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也必须具有“行”类。