CODEWITHSUNDEEP
htmlcss
michaelmcgurk
michaelmcgurk

Reputation: 6509

Vertically align label with checkbox

Why isn't my label vertically aligned with my checkbox? The text appears higher vertically.

<input type="checkbox" name="remember" id="remember" style="float: left; margin-top:0.5em;" />
<label style="font-size:12px; display: block; margin-left: 1.5em;">Remember me</label>

Please help. Thank you.

Upvotes: 0

Views: 79

Answers (2)

user2575725
user2575725

Reputation: 

#remember {
  float: left;
  margin-top: 1px; /* updated this */
}
#remember + label {
  font-size: 12px;
  display: block;
  margin-left: 1.5em;
}
<input type="checkbox" name="remember" id="remember" />
<label>Remember me</label>

Side note: Avoid using inline css

Upvotes: 1

user3164891
user3164891

Reputation: 298

change display:block to display: inline-block
And give a margin-top of around 5px

Upvotes: 0

Related Questions