[RESOLVED] Can't get text to line up the checkbox?

[blakemckenna]

In the attached image, I'm trying to get the "Show Characters" to vertically line up with the checkbox and cannot figure out how to make this work. I'm using an HTML <input> tag and a HTML <label> tag rather than the ASP:Checkbox tag. Both of these elements are in a <td> of a <table> element. I've tried using CSS like "vertical-align: middle"...doesn't work. I've tried "padding: 3px"...doesn't work either. Not sure how to fix this.

[NeedSomeAnswers]

Tables are notoriously difficult to get things to align properly with, and are rarely used for layouts in modern web systems.

If you use Div's for your layout you will find it easier, you can generally align stuff inside Divs

here is an example

HTML

 
<div>
    <label><input type="checkbox" /> Show Characters</label>
</div>

CSS

label {
  display: block;
  padding-left: 15px;
  text-indent: -15px;
}
input {
  width: 16px;
  height: 16px;
  padding: 0;
  margin:0;
  vertical-align: bottom;
  position: relative;
  top: -1px;
  *overflow: hidden;
}

or if your prepared to enter the world of the Flexbox then you have the best control over layout and positioning. Its a bit of a learning curve but once you start using them you will never look back.

[blakemckenna]

That worked NeedSomeAnswers...thanks!