使标签与自定义复选框对齐

Question

跟进这个问题Make custom checkbox label text row breaks like normal。

我有一个自定义复选框，我想让标签文本与复选框 span 元素对齐。

我尝试了一些东西，但似乎没有任何动静。怎么解决？

      input[type="checkbox"].custom-switch {
        display: none;
      }

     .switch{
    display: inline-flex;
  }

  .switch:before {
    width: 30px;
    min-width: 30px;
    height: 15px;
    border-radius: 15px;
    border: 2px solid #ddd;
    background-color: #EEE;
    content: "";
    margin-right: 5px;
    transition: background-color 0.5s linear;
  }
  
  .switch:after {
    width: 11px;
    height: 11px;
    border-radius: 15px;
    background-color: #fff;
    content: "";
    transition: margin 0.1s linear;
    box-shadow: 0px 0px 5px #aaa;
    position: absolute;
    margin-top: 2px;
    margin-left: 2px;
  }

  input[type="checkbox"].custom-switch + label {
    cursor: pointer;
  }

  input[type="checkbox"].custom-switch:checked + label > .switch:before {
    background-color: #1a94ff;
  }
  
  input[type="checkbox"].custom-switch:checked +  label >.switch:after {
    margin: 2px 0 0 17px;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div>
  <input class="custom-switch" id="updateAllCheckbox" type="checkbox" style="top: 2px;">
  <label for="updateAllCheckbox" style="font-weight: normal; font-family: inherit;">
    <span class="switch"></span>
    Some text about updating
    <select class="form-control dropdownUpdate" style="width: 90px; display: initial; padding: 0px; height: 23px; margin-right: 3px;;margin-left: 5px;">
    <option value="red">Newest Ver</option>
    <option value="yellow">Old Version</option>
    <option value="green">Outdated Ver</option>
  </select>
  Even more text to format
  </label>
</div>
<br />
<br />
<br />
<div>
  <input class="custom-switch" id="test3" type="checkbox" style="top: 2px;">
  <label for="test3" style="font-weight: normal; font-family: inherit;">
    <span class="switch"></span>
    Checkbox with custom switch without a select element
  </label>
</div>

---

更新：

Answer 1

我猜你的意思是垂直对齐。

怎么样：

label {
   /* replaces existing display: inline-block (i.e. 
      remove it from the inline style or replace it) */
   display: inline-flex; 
   align-items: center;
}

（顺便说一句：我通过玩https://flexboxfroggy.com/ 学到了这一点。这完全值得花时间！）