如何使用Materialize CSS使按钮居中对齐？

Question

我似乎在Materialize网站上找不到任何有关元素定位的文档。能否有人帮助我将此按钮居中？谢谢。

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

- Lord Goderick

---

你想把按钮放在什么中间？ - Steven B.

一个普通的全宽度 div。 - Lord Goderick

Answer 1

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

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

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

请参阅文档。

- Steven B.

---

另外，你知道如何使用 px 来定位按钮吗？我的 CSS 似乎没有任何效果。 - Lord Goderick

@LordGoderick 不太确定你的意思。你想做什么？ - Steven B.

比如说，我想把按钮向左“推”20像素。我应该在哪里覆盖原始的CSS？ - Lord Goderick

@LordGoderick 给锚点标签添加一个id，并使用margin-right:20px来定位它将是最简单的方法。 - Steven B.

哦，我的天啊，我在问你之前就已经尝试过了，但是它没有起作用。但现在它突然间可以工作了，可能是因为我犯了一个笨拙的错误。谢谢。 - Lord Goderick

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>

- Niraj

---

这是最简单的方法来做到这一点。 - John Quasar

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”类。

- Darryl Dolan