我想把切换按钮放在我的元素“Client_name”的中心对齐。我创建了另一个div，但是我无法让按钮下降并将其放在更右边。你有什么想法吗？
jsfiddle链接就在下面
https://jsfiddle.net/6cyuwxvf/
1
871.switch {
position: relative;
display: inline-block;
width: 73px;
height: 32px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #CD3B1B;
-webkit-transition: .4s;
transition: .4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
border-radius: 50%;
}
input:checked + .slider {
background-color: #89C445;
}
input:focus + .slider {
box-shadow: 0 0 1px #89C445;
}
input:checked + .slider:before {
-webkit-transform: translateX(86px);
-ms-transform: translateX(36px);
transform: translateX(38px);
}
.button10 {
background-color: white;
color: black;
border: 2px solid;
width: 500px;
height: 50px;
}
.div-permission {
display: table-cell;
vertical-align: middle;
height: 45px;
width: 900px;
border: 1px solid red;
} 
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
您可以使用
display: flex;和align-items: center;进行垂直对齐，并为开关添加一些边距。.switch { position: relative; display: inline-block; width: 73px; height: 32px; margin-left: 0.25rem; } .switch input { display: none; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #CD3B1B; -webkit-transition: .4s; transition: .4s; border-radius: 34px; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; border-radius: 50%; } input:checked+.slider { background-color: #89C445; } input:focus+.slider { box-shadow: 0 0 1px #89C445; } input:checked+.slider:before { -webkit-transform: translateX(86px); -ms-transform: translateX(36px); transform: translateX(38px); } .button10 { background-color: white; color: black; border: 2px solid; width: 500px; height: 50px; } .div-permission { display: flex; align-items: center; height: 45px; width: 900px; border: 1px solid red; }<div class="div-permission"> <input type="text" class="button10" placeholder="Client_name" /> <label class="switch"> <input type="checkbox" id="togBtn" onclick="myFunction()" /> <div class="slider round"></div> </label> <input type="submit" id="myDIV" style="display: none;" name="valider" onclick="style.display = 'none'" /> </div>