Html 使内联元素与内联块元素对齐

我在它们旁边有一些带跨距的开关（跨距中有“真”和“假”）。我希望跨距在切换所占用的垂直空间中居中。我如何才能最好地实现这一点

.question\u标签组{
边缘底部：2rem；
}
.开关{
位置：相对位置；
显示：内联块；
宽度：60px；
高度：34px；
}
.开关输入{
不透明度：0；
宽度：0；
身高：0；
}
.滑块{
位置：绝对位置；
光标：指针；
排名：0；
左：0；
右：0；
底部：0；
背景色：#ccc；
-webkit转换：0.4s；
过渡：0.4s；
}
.滑块：之前{
位置：绝对位置；
内容：''；
高度：26px；
宽度：26px；
左：4px；
底部：4px；
背景色：白色；
-webkit转换：0.4s；
过渡：0.4s；
}
输入：选中+滑块{
背景色：#2196f3；
}
输入：焦点+.滑块{
盒影：0 0 1px#2196f3；
}
输入：选中+。滑块：之前{
-webkit转换：translateX（26px）；
-ms变换：translateX（26px）；
转化：translateX（26px）；
}
/*圆形滑块*/
.圆滑{
边界半径：34px；
}
.滑块.圆形：之前{
边界半径：50%；
}

假的
真的

最简单的方法是为

.question\u label-group

类提供以下样式：

显示：flex

和

对齐项目：居中

为你更新了小提琴。您可能还希望为滑块或跨距设置左/右边距

.question\u标签组{
边缘底部：2rem；
显示器：flex；
对齐项目：居中；
}
.开关{
位置：相对位置；
显示：内联块；
宽度：60px；
高度：34px；
}
.开关输入{
不透明度：0；
宽度：0；
身高：0；
}
.滑块{
位置：绝对位置；
光标：指针；
排名：0；
左：0；
右：0；
底部：0；
背景色：#ccc；
-webkit转换：0.4s；
过渡：0.4s；
}
.滑块：之前{
位置：绝对位置；
内容：''；
高度：26px；
宽度：26px；
左：4px；
底部：4px；
背景色：白色；
-webkit转换：0.4s；
过渡：0.4s；
}
输入：选中+滑块{
背景色：#2196f3；
}
输入：焦点+.滑块{
盒影：0 0 1px#2196f3；
}
输入：选中+。滑块：之前{
-webkit转换：translateX（26px）；
-ms变换：translateX（26px）；
转化：translateX（26px）；
}
/*圆形滑块*/
.圆滑{
边界半径：34px；
}
.滑块.圆形：之前{
边界半径：50%；
}

假的
真的

更新css:

.question__label-group {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
}