CODEWITHSUNDEEP
htmlcsscheckbox
devigner
devigner

Reputation: 152

How can I vertically align a font-awesome input checkbox with its label?

I'm using font-awesome in place of default checkboxes and they are not vertically aligned with their labels. How can I either vertically align them or position the label without moving the checkbox itself?

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

Codepen at http://codepen.io/3chordme/pen/pbRwgQ

EDIT: I would like the label and the checkbox to be vertically aligned along their center axes. Adding the style { vertical-align: middle } to the label does not work. Relative positioning of the label moves the text and the checkbox. Changing the font size of the checkbox or the text is not an option.

Upvotes: 0

Views: 1216

Answers (4)

webdevanuj
webdevanuj

Reputation: 675

add vertical-align: middle; to .checkbox-green + label:before that's it

Upvotes: 3

dlsso
dlsso

Reputation: 8091

Assuming you want to center them you need to do something like this. Note I'm not a CSS wizard so this may be a less than ideal solution.

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

Upvotes: 2

M.Tanzil
M.Tanzil

Reputation: 1995

Just add the below properties to label::before Pseudo selector, it will aligned vertically.

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

Upvotes: 1

Ann
Ann

Reputation: 274

Add vertical-align: middle; to the label element. It says the item to place it into the middle of each other.

Upvotes: 1

Related Questions