Center custom checkbox next to text - html

Question

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!

Answer 1

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>

Answer 2

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

Answer 3

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