Html 将文本与切换开关对齐

我按照w3schools的说明创建了一个，我希望文本位于它的左侧，以解释滑块的作用，但它一直被放在滑块的顶部，或者未对齐

/*开关-滑块周围的框*/
.开关{
位置：相对位置；
显示：内联块；
宽度：60px；
高度：34px；
}
/*隐藏默认HTML复选框*/
.开关输入{
不透明度：0；
宽度：0；
身高：0；
}
/*滑块*/
.滑块{
位置：绝对位置；
光标：指针；
排名：0；
左：0；
右：0；
底部：0；
背景色：#ccc；
-webkit转换：.4s；
过渡：.4s；
边界半径：34px；
}
.滑块：之前{
位置：绝对位置；
内容：“；
高度：26px；
宽度：26px；
左：4px；
底部：4px；
背景色：白色；
-webkit转换：.4s；
过渡：.4s；
边界半径：50%；
}
输入：选中+滑块{
背景色：#2196F3；
}
输入：焦点+.滑块{
盒影：0 0 1px#2196F3；
}
输入：选中+。滑块：之前{
-webkit转换：translateX（26px）；
-ms变换：translateX（26px）；
转化：translateX（26px）；
}

启用

添加

显示：flex和
对齐项目：居中
到
#enabled div
，可能还有一些间距余量

关于Flexbox的更多信息：
添加
显示：flex和
对齐项目：居中
到
#enabled div
，可能还有一些间距余量

关于Flexbox的更多信息：
您可以做的是将
标记的
显示
属性放置到
内联块
，并将
垂直对齐
放置到
中间
。因此，在段落中添加一点填充，就可以使用切换按钮将其居中


/*开关-滑块周围的框*/
.开关{
位置：相对位置；
显示：内联块；
宽度：60px；
高度：34px；
}
p{
显示：内联块；
垂直对齐：中间对齐；
垫面：5px；
右侧填充：5px；
}
/*隐藏默认HTML复选框*/
.开关输入{
不透明度：0；
宽度：0；
身高：0；
}
/*滑块*/
.滑块{
位置：绝对位置；
光标：指针；
排名：0；
左：0；
右：0；
底部：0；
背景色：#ccc；
-webkit转换：.4s；
过渡：.4s；
边界半径：34px；
}
.滑块：之前{
位置：绝对位置；
内容：“；
高度：26px；
宽度：26px；
左：4px；
底部：4px；
背景色：白色；
-webkit转换：.4s；
过渡：.4s；
边界半径：50%；
}
输入：选中+滑块{
背景色：#2196F3；
}
输入：焦点+.滑块{
盒影：0 0 1px#2196F3；
}
输入：选中+。滑块：之前{
-webkit转换：translateX（26px）；
-ms变换：translateX（26px）；
转化：translateX（26px）；
}

启用

您可以做的是将
标记的
显示
属性放置到
内联块
，并将
垂直对齐
放置到
中间
。因此，在段落中添加一点填充，就可以使用切换按钮将其居中


/*开关-滑块周围的框*/
.开关{
位置：相对位置；
显示：内联块；
宽度：60px；
高度：34px；
}
p{
显示：内联块；
垂直对齐：中间对齐；
垫面：5px；
右侧填充：5px；
}
/*隐藏默认HTML复选框*/
.开关输入{
不透明度：0；
宽度：0；
身高：0；
}
/*滑块*/
.滑块{
位置：绝对位置；
光标：指针；
排名：0；
左：0；
右：0；
底部：0；
背景色：#ccc；
-webkit转换：.4s；
过渡：.4s；
边界半径：34px；
}
.滑块：之前{
位置：绝对位置；
内容：“；
高度：26px；
宽度：26px；
左：4px；
底部：4px；
背景色：白色；
-webkit转换：.4s；
过渡：.4s；
边界半径：50%；
}
输入：选中+滑块{
背景色：#2196F3；
}
输入：焦点+.滑块{
盒影：0 0 1px#2196F3；
}
输入：选中+。滑块：之前{
-webkit转换：translateX（26px）；
-ms变换：translateX（26px）；
转化：translateX（26px）；
}

启用

添加
显示：内联块到
p
和
垂直对齐：中间切换到
。添加
显示：内联块到
p
和
垂直对齐：中间切换到
。切换到
。成功了！谢谢成功了！谢谢