html - 对齐CSS拨动开关

使用this工具，我可以创建一个CSS切换开关，但是当放置在我的页面上时，它在顶部略微偏离，似乎无法找到导致它的原因。

我对CSS不太熟悉，但是据我了解，onoffswitch-switch类是指单击时移动的圆，onoffswitch-inner是指每个选项，因此它必须是onoffswitch或onoffswitch-label，但我不知道。没有看到任何可能导致这种情况的空白选项，并且“开始”按钮也没有任何空白。

拨动开关最初随附

display: block;

我切换到内联。

Here是完整代码。

最佳答案

由于未设置填充或边距，因此您的复选框将与其父元素的顶部对齐。您可以使用padding或margin，但是我建议将vertical-align：middle添加到onoffswitch类中，以提高响应速度。

.onoffswitch {
  position: relative; width: 105px;
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
  display: inline-block;
  vertical-align: middle;
}