Question

我使用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/pbRwgQ

的Codepen

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

Answer 1

将vertical-align: middle;添加到 .checkbox-green + label：之前就是

Answer 2

将vertical-align: middle;添加到label元素。它说项目将它放在彼此的中间。

Answer 3

假设你想要集中他们，你需要做这样的事情。注意我不是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"; }

Answer 4

只需将以下属性添加到public function move() { if(Auth::check()) { Log::info(Input::get('charID')); //When I check the logs this is blank $person = Character::where('id', '=', Input::get('charID'))->first(); $person->map = 100000000; $person->save(); $response = array('status' => 'success', 'text' => 'Your character has been moved!'); return Response::json($response); exit(); } else { return Redirect::action('PageController@showHome'); } }伪选择器，它将垂直对齐。

label::before

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

4 个答案: