Centering text on either side of a toggle

Question

Why are things so difficult in CSS? I want a box, with a toggle switch inside it, with text on either side that is vertically centered.

No matter what I try, the divs containing the text end up vertically staggered relative to the div containing the toggle switch.

I've read a dozen other SO questions about vertical centering...none of them seem to apply. Isn't there some operative principle here?

Fiddle: https://jsfiddle.net/cinerobert/h7g31bqa/

HTML:

<div id="div-yesnotoggle">
  <div id="div-notext">No</div>
  <div id="div-switch">
    <label class="switch">
      <input type="checkbox">
      <div class="slider round"></div>
    </label>
  </div>
  <div id="div-yestext">
    Yes
  </div>
</div>

CSS:

#div-yesnotoggle {
  border: solid;
  width: 160px;
  display: inline-block;
}

#div-notext {
  padding-top: 10px;
  padding-bottom: 10px;
  display: inline-block;
  border: solid;
  width: 40px;
}

#div-switch {
  border: solid;
  display: inline-block;
  width: 60px;
}

#div-yestext {
  padding-top: 10px;
  padding-bottom: 10px;
  display: inline-block;
  border: solid;
}

Can someone please provide a constructive explanation of why my question is getting downvoted? — Robert M., Dec 13 '16 at 20:35

score 1 · Accepted Answer · answered Dec 13 '16 at 19:33

Remove padding on each of the elements and apply on the main container and apply vertical-align:middle on the swith

check the following snippet

#div-yesnotoggle {
  border: solid;
  width: 160px;
  display: inline-block;
  padding-top: 10px;
  padding-bottom: 10px;
}
#div-notext {
  display: inline-block;
  border: solid;
  width: 40px;
}
#div-switch {
  border: solid;
  display: inline-block;
  width: 60px;
  vertical-align: middle;
}
#div-yestext {
  display: inline-block;
  border: solid;
}
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}
.switch input {
  display: none;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}
input:checked + .slider {
  background-color: #2196F3;
}
input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
/* Rounded sliders */

.slider.round {
  border-radius: 34px;
}
.slider.round:before {
  border-radius: 50%;
}

<div id="div-yesnotoggle">
  <div id="div-notext">No</div>
  <div id="div-switch">
    <label class="switch">
      <input type="checkbox">
      <div class="slider round"></div>
    </label>
  </div>
  <div id="div-yestext">
    Yes
  </div>
</div>

Hope this helps

Amazing. Thank you. I don't understand how it works, though. How putting vertical-align: middle on the switch div make it vertically center the text divs too? — Robert M., Dec 13 '16 at 19:36
The element is being set in the middle and all other elements would be flowing next to it.. just see these links would help you http://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div — Geeky, Dec 13 '16 at 19:42
I saw that complete guide page...it doesn't seem to have a case for what I'm asking. I don't see the specific solution you gave me. I find CSS quite confusing.... — Robert M., Dec 13 '16 at 20:02
css is confusing but the above is setting the switch content to be middle and making every other element surrounding to be on the baseline. .i have added those references so that you would get a better understanding — Geeky, Dec 13 '16 at 20:14

score 1 · Answer 2 · answered Dec 13 '16 at 19:37

For the vertical align to work you have to apply it to all of the siblings that have display: inline-block;

Like this:

#div-notext {
  padding-top: 10px;
  padding-bottom: 10px;
  display: inline-block;
  vertical-align: middle;
  border: solid;
  width: 40px;
}

#div-switch {
  border: solid;
  display: inline-block;
  vertical-align: middle;
  width: 60px;
}

#div-yestext {
  padding-top: 10px;
  padding-bottom: 10px;
  display: inline-block;
  vertical-align: middle;
  border: solid;
}

Centering text on either side of a toggle

2 Answers2