Html 如何将字体输入复选框与其标签垂直对齐？

我用font awesome来代替默认的复选框，它们没有与标签垂直对齐。如何在不移动复选框的情况下垂直对齐它们或定位标签

HTML

密码打开

---

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

添加

垂直对齐：中间到标签元素。
它表示要将项目放置在彼此的中间。
假设要将项目居中，则需要执行类似操作。注意我不是CSS向导，所以这可能不是一个理想的解决方案

CSS

只需将以下属性添加到
label:：Pseudo selector之前，它将垂直对齐

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

添加
垂直对齐：中间对齐到。复选框绿色+标签：在之前就是这样
技术上它们是垂直对齐的。您只是将复选框变大了，并且两个复选框都在底部对齐。你想让它们居中对齐吗？一种方法是使用与
复选框相同的
字体大小
：在
之前和
标签
@disso是的，我希望复选框图标和标签文本垂直居中，以便它们沿其垂直轴对齐。这不起作用。“复选框”是标签的一个伪元素。我在回答之前测试了它，试试看，它是有效的。这看起来是CSS，而不是JS，但实际上它确实有效！不管行高修改与否，我都能得到想要的效果，你说的“不塌陷”是什么意思？我在标签上的错误。修好了。看起来你更新了你的小提琴，所以我不能肯定，但我想我是在玩
position:absolute
，我想这需要线的高度。当然，切掉任何你不需要的代码！
@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"; }

@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"; }

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