如何将字体真棒输入复选框与其标签垂直对齐？答案

【问题标题】：How can I vertically align a font-awesome input checkbox with its label?如何将字体真棒输入复选框与其标签垂直对齐？
【发布时间】：2023-03-04 03:56:01
【问题描述】：

我正在使用 font-awesome 代替默认复选框，并且它们未与其标签垂直对齐。如何在不移动复选框本身的情况下垂直对齐它们或定位标签？

HTML

<div class="row">
    <input type="checkbox" class="checkbox-green" id="authorized">
    <label for="authorized">I am authorized to work in the United States.</label>
</div>
<div class="row margin-top-12">
    <input type="checkbox" class="checkbox-green" id="drugs">
    <label for="drugs">I am not currently using illegal drugs.</label>
</div>
<div class="row margin-top-12">
    <input type="checkbox" class="checkbox-green" id="felony">
    <label for="felony">I have not been convicted of a felony.              </label>
</div>

CSS

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

.checkbox-green { display: none; }

.checkbox-green + label:before {
  font-family: FontAwesome;
  font-size: 34px;
  width: 50px;
  color: $brand_green;
  display: inline-block;
  cursor: pointer;
  content: "\f096";
}
.checkbox-green:hover + label:before { color: $brand_green--dark; }
.checkbox-green:checked + label:before { content: "\f046"; }

http://codepen.io/3chordme/pen/pbRwgQCodepen

编辑：我希望标签和复选框沿其中心轴垂直对齐。将样式 { vertical-align: middle } 添加到标签不起作用。标签的相对定位会移动文本和复选框。更改复选框或文本的字体大小不是一个选项。

【问题讨论】：

技术上它们是垂直对齐的。您刚刚使复选框更大，并且两者都对齐底部。你想让它们居中对齐吗？
一种方法是使用相同的font-size checkbox:before 和label。
@disso 是的，我希望复选框图标和标签文本垂直居中，以便它们沿垂直轴对齐。

标签： html css checkbox

【解决方案1】：

将vertical-align: middle; 添加到标签元素。它说物品要放在彼此的中间。

【讨论】：

那行不通。 “复选框”是标签的伪元素。
我在回答之前测试了它，尝试一下，它是工作。

【解决方案2】：

假设您想使它们居中，您需要做这样的事情。请注意，我不是 CSS 向导，所以这可能不是一个理想的解决方案。

CSS

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

.checkbox-green { display: none; }

.checkbox-green + label:before {
  font-family: FontAwesome;
  font-size: 34px;
  width: 50px;
  color: $brand_green;
  display: inline-block;
  cursor: pointer;
  content: "\f096";
  position: relative;
  top: 8px;

}
.checkbox-green:hover + label:before { color: $brand_green--dark; }
.checkbox-green:checked + label:before { content: "\f046"; }

【讨论】：

这似乎是 CSS，而不是 JS，但它确实有效！实际上，无论是否修改 line-height，我都得到了想要的效果，“没有折叠”是什么意思？
标签上的错误。修复。看起来你更新了你的小提琴，所以我不能肯定，但我想我在玩position: absolute，我认为它需要行高。绝对删掉你不需要的任何代码！

【解决方案3】：

只需将以下属性添加到label::before 伪选择器，它将垂直对齐。

.checkbox-green + label::before{
     position:relative;
     top:12px;
 }

【讨论】：

【解决方案4】：

添加vertical-align: middle;到.checkbox-green + label:before就是这样

【讨论】：