我试图将切换按钮居中在页面中心,而不更改其任何color属性。当我尝试更改其位置时,其颜色也会改变。我需要帮助将按钮居中在页面中心。
最佳答案
您可以将transform
属性应用于<div class="center">
,使其位于页面中心
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
body {
background-color: #7a86cb;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: rgba(0, 0, 0, 0.5);
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: rgba(230, 231, 242, 0.15);
}
input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
input:checked+.slider:before {
background-color:#E6E7F2!important
}
<div class="center">
<label for="toggle"></label>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>