How can I align a toggle button on the center of a div element?-CodePudding

I'm looking to place the toggle button aligned to the center of my element "Client_name" I created another div but I can't get the button to drop down and put it more to the right. Do you have any ideas?

The jsfiddle link is just below

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

CodePudding user response：

You can use display: flex; with align-items: center; for vertical alignment and just add some margin to the switch.

.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 >
  <input type="text"  placeholder="Client_name" />

  <label >
    <input type="checkbox" id="togBtn" onclick="myFunction()" />
    <div ></div>
  </label>

  <input type="submit" id="myDIV" style="display: none;" name="valider" onclick="style.display = 'none'" />
</div>

CodePudding user response：

In order to change the position, I use the CSS transform function.

Change your .switch class to this:

.switch {
  position: relative;
  display: inline-block;
  width: 73px;
  height: 32px;
  top:50%;
  left:10%;
  transform: translate(-50%,-50%);
}

That should center it for you! All I added was the top, left, and transform functions in the class.