使复选框/单选按钮在物化CSS中居中

Question

我在使用Materilize CSS使复选框居中对齐时遇到了问题。

<div class="center-align">

    <h5>Select Value </h5>

    <form action="#" >

            <p class="center-align">
              <input class="filled-in" name="group1" type="checkbox" id="1">
              <label for="1" class="teal-text text-lighten-2" >First</label>
            </p>
            <p class="center-align">
              <input  class="filled-in"name="group1" type="checkbox" id="2">
              <label for="2" class="teal-text text-lighten-2">Second</label><span></span>
            </p>
    </form>

​

​

​

这会导致复选框居中对齐，但彼此偏移。如果标签完全相同，则它们是匹配的。

我已经尝试将居中对齐类添加到<div>、<form>、<input>和<p>中，但都没有像我预期的那样工作。

Answer 1

我能够通过添加此css来获得所需的结果

<style>
      label{  
          left: 50%;
        }   
</style>