使標簽與自定義復選框對齊

Question

這個問題的后續行動使自定義復選框標簽文本行像平常一樣中斷。

我有一個自定義復選框，我想讓標簽文本與復選框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/學到的。這完全值得花時間！）