Html 垂直对齐复选框标签？

Vertical align checkbox label?

提问by user2043533

I have checkboxes like this:

我有这样的复选框：

<label class="checkbox-label"><input type="checkbox" value="115">Administrators</label>

But I cannot fugure out how to style the label to be center valigned to the checkbox.

但我无法弄清楚如何将标签的样式设置为与复选框居中对齐。

I tried adding vertical-align:middle;

我尝试添加 vertical-align:middle;

Thanks

谢谢

回答by Artur K?pp

This is what I did with your code.

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

html

html

<label class="checkbox-label"><input type="checkbox" value="115">-middle</label>

css

css

label.checkbox-label input[type=checkbox]{
    position: relative;
    vertical-align: middle;
    bottom: 1px;
}

Fiddle

小提琴

回答by James Coyle

Try using:

尝试使用：

vertical-align: text-bottom;

jsFiddle

js小提琴

Edit:

编辑：

 <input id="checkbox" type="checkbox" value="115">
 <label class="checkbox-label" for="checkbox">Administrators</label>

jsFiddle

js小提琴

回答by Honorable Chow

Adjust the line height of the label.

调整标签的行高。