如何使用 Materialise CSS 使按钮居中对齐？答案

【问题标题】：How does one center-align a button using Materialize CSS?如何使用 Materialise CSS 使按钮居中对齐？
【发布时间】：2017-05-24 14:21:59
【问题描述】：

我似乎在 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;
}

【问题讨论】：

你想让按钮居中什么？
只是一个普通的全宽div

标签： html css materialize

【解决方案1】：

垂直对齐：
使用包装器并给包装器一个.valign-wrapper的类

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

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

见documentation。

【讨论】：

另外，你知道如何用px定位按钮吗？我的 CSS 似乎没有任何效果。
@LordGoderick 不确定你的意思。你想做什么？
例如，我想将 20px 向左轻推按钮。我会在哪里覆盖原始 CSS？
@LordGoderick 将 id 添加到锚标签并使用 margin-right:20px 定位它是最简单的方法。
天哪，我在问你之前就这样做了，但没有成功。但现在它突然起作用了，可能是笨拙的错误。谢谢。

【解决方案2】：

您可以使用具体化类 center-align 使按钮居中，但在 <p> 或 <div> 标签上使用它。因为<a>标签是inline-block标签。

这是代码。

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

【讨论】：

这是最简单的方法。

【解决方案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' 类。

【讨论】：