[英]How does one center-align a button using Materialize CSS?
I can't seem to find any documentation on the Materialize website regarding positioning of elements.我似乎无法在 Materialise 网站上找到任何关于元素定位的文档。 Can anyone help me center this button?谁能帮我把这个按钮居中? Thanks in advance.提前致谢。
<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;
}
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-align
on the element to be centered.在要居中的元素上使用.left-align
、 .right-align
、 .center-align
。
See documentation .请参阅文档。
You can center the button using materialize class center-align, but use it on <p>
or <div>
tag.您可以使用 materialize 类 center-align 将按钮居中,但在<p>
或<div>
标签上使用它。 since <a>
tag is inline-block tag.因为<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>
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' 类。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.