如何在一个 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>