html - 使用 css 将 MDL 复选框居中

Question

我正在尝试使用 mdl 创建一个表，用户可以在其中检查某些工作日。为此，我希望有标签在它们下方居中的复选框。对于普通的 html，我已经找到了这个解决方案。对于 mdl-checkbox，这不起作用，请参见示例。到目前为止，我只能设法使标签居中，而不是 mdl-checkbox 本身。关于如何将两者居中的任何建议？

.myClass label{
    text-align:center;
    display:block;
}

  <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.amber-indigo.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  
  
        <div class="myClass">
          <label>            
            <input type="checkbox" id="one">
            <br>This works
          </label>
        </div>
        
        <div class="myClass">
         <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-th">
          <input type="checkbox" id="checkbox-th" class="mdl-checkbox__input">
          <br>This doesn't
         </label>
        </div>

标签： htmlcssmaterial-design-lite