垂直对齐复选框标签？ [复制]

Posted 2023-02-22

【中文标题】垂直对齐复选框标签？ [复制]

【英文标题】：Vertical align checkbox label? [duplicate]

【发布时间】：2013-02-20 06:26:30

【问题描述】：

我有这样的复选框：

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

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

我尝试添加vertical-align:middle;

谢谢

【问题讨论】：

您可能需要针对特定​​场景使用行高或负边距。我会提供一个例子，但你没有给我们演示或 CSS。

【参考方案1】：

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

html

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

css

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

Fiddle

【讨论】：

这是正确答案，因为它不会改变 OP 给出的 html 语法。

除非它不起作用。它使它更接近，但它仍然没有正确对齐。添加垂直对齐：文本底部；不过你的 CSS 确实如此。

我比重复的参考答案更喜欢这个答案。赞一个！

【参考方案2】：

尝试使用：

vertical-align: text-bottom;

jsFiddle

编辑：

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

jsFiddle

【讨论】：

@user2043533 检查小提琴。它对我有用。

是的，这行得通，但是对于您的，我无法单击标签来选中该框。

您需要在标签中添加`for="checkboxId"'。查看我的编辑。

别忘了接受答案！

如果您修改文本大小，您的示例将不起作用。我将您的小提琴设置为font-size: 10px;，但它无法将文本与输入对齐。

【参考方案3】：

调整标签的行高。