如何在一個 div 元素上居中對齊一個切換按鈕？

Question

我想把切換按鈕放在我的元素「Client_name」的中心對齊。我創建了另一個div，但是我無法讓按鈕下降並將其放在更右邊。你有什麼想法嗎？

jsfiddle連結就在下面

https://jsfiddle.net/6cyuwxvf/

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

Answer 1

您可以使用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>