input[type="checkbox"]與label對齊解決辦法

input[type=”checkbox”]與label對齊解決辦法

小菜鳥一枚,在項目中遇到文字與checkbook無法水平對齊, 源代碼如下:

<th colspan="1" class="select-all">
    <input type="checkbox" id="select-all">
    <label for="select-all">全選</label>
</th>

界面效果如圖:

試了很多種方法, 都沒有將文字與選擇框對齊;
最後請教大神, 給出的解決方案是:

.select-all label{
    padding-left: 4px;
    cursor: pointer;
    margin: 0;
    vertical-align: middle;
}

.select-all input{
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 2px;
}

然後文字和按鈕就完美對齊了, 效果如下:

在此留下筆記, 方便以後查找, 也希望能幫助到需要的人.