I have created a form that includes a custom checkbox element.
The issue is that the label for the checkbox is not vertically aligned with the checkbox itself.
How can I adjust the label to be vertically centered with the checkbox?
You can see the code in action here: https://jsfiddle.net/totalist/u40vz8o1/2/
For better understanding, I am including a snippet of the HTML code:
<form>
</div>
<div class="form-group">
<label for="status" class="col-form-label">Status:</label>
<label class="switch">
<input type="checkbox" class="form-control" name="status">
<span class="slider round"></span>
</label>
</div>
</form>
Below is the CSS code used for styling:
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Remaining CSS styles here */