HTML-MDL复选框/切换居中

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

<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>

来源

2017-09-22 Luke Holland

我试图

也CSS居中他们但也不工作。 –

使用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>

来源

2017-09-22 20:29:46 bhansa

Thansk评论，但它仍然无法正常工作。 –

请告诉我什么不起作用。 – bhansa

[链接]（http://prntscr.com/goi0kj）图标似乎在页面的左侧。 –

我用柔性标签上居中里面的物品。它还将内容垂直对齐，以便您的输入内嵌您的标签。

.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>

来源

2017-12-08 23:35:24 jeh

HTML-MDL复选框/切换居中

回答

相关问题