CODEWITHSUNDEEP
htmlcss
ajmajmajma
ajmajmajma

Reputation: 14216

Center custom checkbox next to text

I have made a custom on/off checkbox and I am having some trouble figuring out how to center it next to some text. Right now, I am attempting to use inline block to try this. Here is my code :

.for-you-switch .switch {
  position: relative;
  display: inline-block;
  width: 65px;
  height: 30px;
}

.for-you-switch input {
  display: none;
}

.for-you-switch input:checked+.slider {
  background-color: red;
}

.for-you-switch input:checked+.slider:after {
  transform: translateX(35px);
}

.for-you-switch input:checked+.slider:before {
  content: "on";
  right: 36px;
  color: #fff;
}

.for-you-switch input:focus+.slider {
  box-shadow: 0 0 1px #2196F3;
}

.for-you-switch .slider {
  position: absolute;
  cursor: pointer;
  border-radius: 34px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
}

.for-you-switch .slider:after {
  position: absolute;
  content: "";
  border-radius: 50%;
  height: 26px;
  width: 26px;
  left: 2px;
  bottom: 2px;
  background-color: #fff;
  transition: .2s;
}

.for-you-switch .slider:before {
  position: absolute;
  content: "off";
  right: 12px;
  top: 6px;
  transition: .4s;
}
<div class="for-you-switch">
  <span>Products for you.</span>
  <label class="switch">
        <input type="checkbox" />
        <div class="slider round"></div>
     </label>
</div>

Here is a fiddle with the code to play with - https://jsfiddle.net/qywkdv31/2/

As you can see the button is kind of floating at the top of the wrapping div, I would like to have it centered to the right of the text. Unsure how to accomplish this. Thanks!

Upvotes: 0

Views: 83

Answers (3)

sonam
sonam

Reputation: 24

Hope this help.

.switch {
    position: relative;
    display: inline-block;
    vertical-align:middle; 
    width: 65px;
    height: 30px; }

Upvotes: 1

LIJIN SAMUEL
LIJIN SAMUEL

Reputation: 883

Try,

.for-you-switch .switch{
   display: inline-block;
   vertical-align: middle;
}
.for-you-switch span{
   display: inline-block;
   vertical-align: middle;
}

Upvotes: 1

hungerstar
hungerstar

Reputation: 21685

You just need to add vertical-align: middle; to .for-you-switch .switch.

.for-you-switch .switch {
  position: relative;
  display: inline-block;
  width: 65px;
  height: 30px;
  vertical-align: middle;
}

.for-you-switch input {
  display: none;
}

.for-you-switch input:checked+.slider {
  background-color: red;
}

.for-you-switch input:checked+.slider:after {
  transform: translateX(35px);
}

.for-you-switch input:checked+.slider:before {
  content: "on";
  right: 36px;
  color: #fff;
}

.for-you-switch input:focus+.slider {
  box-shadow: 0 0 1px #2196F3;
}

.for-you-switch .slider {
  position: absolute;
  cursor: pointer;
  border-radius: 34px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
}

.for-you-switch .slider:after {
  position: absolute;
  content: "";
  border-radius: 50%;
  height: 26px;
  width: 26px;
  left: 2px;
  bottom: 2px;
  background-color: #fff;
  transition: .2s;
}

.for-you-switch .slider:before {
  position: absolute;
  content: "off";
  right: 12px;
  top: 6px;
  transition: .4s;
}
<div class="for-you-switch">
  <span>Products for you.</span>
  <label class="switch">
    <input type="checkbox" />
    <div class="slider round"></div>
  </label>
</div>

Upvotes: 1

Related Questions