對齊標簽和自定義復選框

Question

如何對齊標簽和自定義復選框？ 該代碼段如下。 我要確保標簽和開關垂直對齊，並且還應該能夠使用標簽中的任何文本。 我不能使用position:absolute方法來對齊標簽，因為文本可能會更改，並且我不希望有任何重疊。

 .switch { position: relative; display: inline-block; } .switch input[type="checkbox"] { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; cursor: pointer; outline: none; height: 25px; width: 50px; border-radius: 25px; background-color: #999; } .switch input[type="checkbox"]:checked { background-color: green; } .switch input[type="checkbox"]:after { position: absolute; content: ' '; height: 16.66667px; width: 16.66667px; top: 6.5px; right: 33px; border-radius: 11.11111px; background: #fff; } .switch input[type="checkbox"]:checked::after { right: 6px; } 

 <div class="switch"> <label for="checkbox1">Test Test Test Test</label> <input type="checkbox" id="checkbox1"> </div> 

Answer 1

您應該能夠在輸入上使用vertical-align屬性（例如： vertical-align: middle; ）：

 .switch { position: relative; display: inline-block; } .switch input[type="checkbox"] { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; cursor: pointer; outline: none; height: 25px; width: 50px; border-radius: 25px; background-color: #999; vertical-align: middle; } .switch input[type="checkbox"]:checked { background-color: green; } .switch input[type="checkbox"]:after { position: absolute; content: ' '; height: 16.66667px; width: 16.66667px; top: 6.5px; right: 33px; border-radius: 11.11111px; background: #fff; } .switch input[type="checkbox"]:checked::after { right: 6px; } 

 <div class="switch"> <label for="checkbox1">Test Test Test Test</label> <input type="checkbox" id="checkbox1"> </div>