Html 对齐标签和自定义复选框

如何对齐标签和自定义复选框？下面是代码片段。我想确保标签和开关垂直对齐，并且我还应该能够使用标签中的任何文本。我无法使用

position:absolute

方法对齐标签，因为文本可能会更改，我不希望有任何重叠

开关{
位置：相对位置；
显示：内联块；
}
.开关输入[type=“checkbox”]{
-webkit外观：无；
-moz外观：无；
-ms外观：无；
-o-外观：无；
外观：无；
光标：指针；
大纲：无；
高度：25px；
宽度：50px；
边界半径：25px；
背景色：#999；
}
.开关输入[type=“checkbox”]：选中{
背景颜色：绿色；
}
.开关输入[type=“checkbox”]：之后{
位置：绝对位置；
内容：''；
高度：16.66667px；
宽度：16.66667px；
顶部：6.5px；
右：33px；
边界半径：11.11111px；
背景：#fff；
}
.开关输入[type=“checkbox”]：选中：：之后{
右：6px；
}

试验

您应该能够对输入使用垂直对齐属性（例如：

垂直对齐：中间；

）：

开关{
位置：相对位置；
显示：内联块；
}
.开关输入[type=“checkbox”]{
-webkit外观：无；
-moz外观：无；
-ms外观：无；
-o-外观：无；
外观：无；
光标：指针；
大纲：无；
高度：25px；
宽度：50px；
边界半径：25px；
背景色：#999；
垂直对齐：中间对齐；
}
.开关输入[type=“checkbox”]：选中{
背景颜色：绿色；
}
.开关输入[type=“checkbox”]：之后{
位置：绝对位置；
内容：''；
高度：16.66667px；
宽度：16.66667px；
顶部：6.5px；
右：33px；
边界半径：11.11111px；
背景：#fff；
}
.开关输入[type=“checkbox”]：选中：：之后{
右：6px；
}

试验