MateralizeCSS，如何使复选框居中

Question

下面是我的代码，显示复选框未对齐。添加了Materialize.css的CDN以允许进行故障排除。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">

<form action="#" class="center-align">

  <p class="center-align">
    <label>
     <input type="checkbox" />
     <span>test</span>
    </label>
  </p>
  <p class="center-align">
    <label class="center">
      <input type="checkbox" />
      <span>not aligned</span>
    </label>
  </p>
</form>

复选框未对齐，怎么来？

Answer 1

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css" rel="stylesheet"/>

      <div class="row">
      <div class="col offset-s5">
            <form action="#">
                    <p>
                        <label class="center">
                            <input type="checkbox" />
                         <span>test</span>
                        </label>
                    </p>
                   <p>
                        <label class="center">
                            <input type="checkbox" />
                         <span>not aligned</span>
                        </label>
                    </p>
                </form>
        </div>
        </div>

您应该熟悉Materialize Grid System并使用它，您的方式只会对齐文本，而不是复选框本身。