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複選框/切換居中

回答

相關問題