Question

我试图在我的html文档中使用这两个组件，但它们都不会居中。使用复选框，文本将居中，但图标将保留在页面左侧。

<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
  <input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" checked>
  <span class="mdl-checkbox__label">Checkbox</span>
</label>

<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
  <input type="checkbox" id="switch-1" class="mdl-switch__input" checked>
  <span class="mdl-switch__label"></span>
</label>

Answer 1

使用display:block标记和居中对齐标签。

label
{
  text-align:center;
}
.mdl-checkbox, .mdl-switch{
display:block;
}

<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
  <input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" checked>
  <span class="mdl-checkbox__label">Checkbox</span>
</label>

<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
  <input type="checkbox" id="switch-1" class="mdl-switch__input" checked>
  <span class="mdl-switch__label">Checkbox 2</span>
</label>

Answer 2

我在标签上使用flex来将项目放在里面。它还垂直对齐内容，因此您的输入与您的标签内联。

.mdl-checkbox, .mdl-switch{
display:flex;
justify-content:center;
align-items:center;
}

<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
  <input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" checked>
  <span class="mdl-checkbox__label">Checkbox</span>
</label>

<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
  <input type="checkbox" id="switch-1" class="mdl-switch__input" checked>
  <span class="mdl-switch__label">Checkbox 2</span>
</label>

HTML - MDL复选框/切换居中

2 个答案: