水平居中 mdl-button
Horizontally center a mdl-button
有没有简单的方法让 mdl-button
水平居中?像这样的按钮:
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
<i class="material-icons">add</i>
</button>
仅在网页上水平居中,不使用 mdl-grid
。还是 mdl-grid
使用 MDL 时通常定位事物的正确方法?
由于按钮是 inline-block
,最简单的方法是将 text-align: center;
应用于父元素。如果您不想使用网格,可以使用 .center-align
帮助器 class 来做到这一点。
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet"/>
<div class="center-align">
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
<i class="material-icons">add</i>
</button>
</div>
有没有简单的方法让 mdl-button
水平居中?像这样的按钮:
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
<i class="material-icons">add</i>
</button>
仅在网页上水平居中,不使用 mdl-grid
。还是 mdl-grid
使用 MDL 时通常定位事物的正确方法?
由于按钮是 inline-block
,最简单的方法是将 text-align: center;
应用于父元素。如果您不想使用网格,可以使用 .center-align
帮助器 class 来做到这一点。
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet"/>
<div class="center-align">
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
<i class="material-icons">add</i>
</button>
</div>