在Materialise CSS中居中复选框/单选按钮

时间:2018-03-01 23:29:49

标签: html css material-design materialize

我无法使用Materilize CSS获取中心对齐的复选框。

  <div class="col-2" style="padding: 20px;">
            <div class="btn btn-primary dropdown-toggle dropdown-toggle-split fa fa-globe" id="acctFilter" data-toggle="dropdown" acctid="placeholder">
               SELECT ACCOUNT
                <span class="sr-only">Toggle Dropdown</span>
            </div>
            <div class="dropdown-menu" id="acctList" role="menu" aria-labelledby="dropdownMenu">
            </div>
        </div>

enter image description here

这导致复选框在中心对齐,但相互偏移。如果标签完全相同,则匹配。

我尝试将中心对齐类添加到<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>,但没有任何效果,正如我所期望的那样。

1 个答案:

答案 0 :(得分:1)

通过添加此css能够实现所需的结果

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