Html 如何使用 Materialize CSS 将按钮居中对齐？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44161171/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How does one center-align a button using Materialize CSS?
提问by Lord Goderick
I can't seem to find any documentation on the Materialize website regarding positioning of elements. Can anyone help me center this button? Thanks in advance.
我似乎无法在 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;
}
回答by Steven B.
Vertical Alignment:
Use a wrapper and give the wrapper a class of .valign-wrapper
垂直对齐：
使用包装器并给包装器一个类.valign-wrapper
<div class="valign-wrapper">
<h5>This should be vertically aligned</h5>
</div>
Horizontal Alignment:
Use .left-align, .right-align, .center-alignon the element to be centered.
水平对齐：在要居中的元素上
使用.left-align, .right-align, .center-align。
See documentation.
请参阅文档。
回答by Niraj
You can center the button using materialize class center-align, but use it on <p>or <div>tag. since <a>tag is inline-block tag.
您可以使用 materialize 类 center-align 将按钮居中，但在<p>或<div>标记上使用它。因为<a>标签是内联块标签。
Here is the code.
这是代码。
<p class="center-align">
<a class="waves-effect waves-light btn-large blue"><i class="material-icons right">cloud</i>Enter</a>
</p>
回答by Darryl Dolan
Add 'center' class to the surrounding div:
将 '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>
Note - div must also have the 'row' class.
注意 - div 还必须具有 'row' 类。
