文本旁边的中心自定义复选框

Question

我已经创建了一个自定义开/关复选框，我在查找如何将其置于某些文本旁边时遇到了一些麻烦。现在，我试图使用内联块来尝试这个。这是我的代码：

.for-you-switch .switch {
  position: relative;
  display: inline-block;
  width: 65px;
  height: 30px;
}

.for-you-switch input {
  display: none;
}

.for-you-switch input:checked+.slider {
  background-color: red;
}

.for-you-switch input:checked+.slider:after {
  transform: translateX(35px);
}

.for-you-switch input:checked+.slider:before {
  content: "on";
  right: 36px;
  color: #fff;
}

.for-you-switch input:focus+.slider {
  box-shadow: 0 0 1px #2196F3;
}

.for-you-switch .slider {
  position: absolute;
  cursor: pointer;
  border-radius: 34px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
}

.for-you-switch .slider:after {
  position: absolute;
  content: "";
  border-radius: 50%;
  height: 26px;
  width: 26px;
  left: 2px;
  bottom: 2px;
  background-color: #fff;
  transition: .2s;
}

.for-you-switch .slider:before {
  position: absolute;
  content: "off";
  right: 12px;
  top: 6px;
  transition: .4s;
}

<div class="for-you-switch">
  <span>Products for you.</span>
  <label class="switch">
        <input type="checkbox" />
        <div class="slider round"></div>
     </label>
</div>

以下是使用代码的小提琴 - https://jsfiddle.net/qywkdv31/2/

正如你所看到的那样，按钮有点漂浮在包装div的顶部，我希望它位于文本右侧的中心位置。不确定如何实现这一目标。谢谢！

Answer 1

您只需将vertical-align: middle;添加到.for-you-switch .switch。

＆＃13;

＆＃13;

.for-you-switch .switch {
  position: relative;
  display: inline-block;
  width: 65px;
  height: 30px;
  vertical-align: middle;
}

.for-you-switch input {
  display: none;
}

.for-you-switch input:checked+.slider {
  background-color: red;
}

.for-you-switch input:checked+.slider:after {
  transform: translateX(35px);
}

.for-you-switch input:checked+.slider:before {
  content: "on";
  right: 36px;
  color: #fff;
}

.for-you-switch input:focus+.slider {
  box-shadow: 0 0 1px #2196F3;
}

.for-you-switch .slider {
  position: absolute;
  cursor: pointer;
  border-radius: 34px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
}

.for-you-switch .slider:after {
  position: absolute;
  content: "";
  border-radius: 50%;
  height: 26px;
  width: 26px;
  left: 2px;
  bottom: 2px;
  background-color: #fff;
  transition: .2s;
}

.for-you-switch .slider:before {
  position: absolute;
  content: "off";
  right: 12px;
  top: 6px;
  transition: .4s;
}

＆＃13;

<div class="for-you-switch">
  <span>Products for you.</span>
  <label class="switch">
    <input type="checkbox" />
    <div class="slider round"></div>
  </label>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试，

.for-you-switch .switch{
   display: inline-block;
   vertical-align: middle;
}
.for-you-switch span{
   display: inline-block;
   vertical-align: middle;
}

Answer 3

希望得到这个帮助。

.switch {
    position: relative;
    display: inline-block;
    vertical-align:middle; 
    width: 65px;
    height: 30px; }