垂直对齐复选框标签?

use*_*533 27 html css

我有这样的复选框:

<label class="checkbox-label"><input type="checkbox" value="115">Administrators</label>
Run Code Online (Sandbox Code Playgroud)

但是我无法理解如何将标签设置为中心对齐复选框.

我尝试添加 vertical-align:middle;

谢谢

Art*_*äpp 56

这就是我对你的代码所做的.

HTML

<label class="checkbox-label"><input type="checkbox" value="115">-middle</label>
Run Code Online (Sandbox Code Playgroud)

CSS

label.checkbox-label input[type=checkbox]{
    position: relative;
    vertical-align: middle;
    bottom: 1px;
}
Run Code Online (Sandbox Code Playgroud)

小提琴


Jam*_*yle 6

尝试使用:

vertical-align: text-bottom;
Run Code Online (Sandbox Code Playgroud)

js小提琴

编辑:

 <input id="checkbox" type="checkbox" value="115">
 <label class="checkbox-label" for="checkbox">Administrators</label>
Run Code Online (Sandbox Code Playgroud)

js小提琴

  • 如果您修改文本大小,您的示例将不起作用。我将您的小提琴设置为 `font-size: 10px;`,但它未能将文本与输入对齐。 (3认同)