Vertical align question

Hi,

I'm trying to align a checkbox vertically in a div, but I can't get it
to work:

<div style="border: 1px solid black; height:100px;vertical-
align:middle;">
<input type="checkbox" style="vertical-align:middle;"/>
</div>

Is this not correct?

Thanks

On 2009-02-05, Mark Smith <marksmith5555 (AT) jungle-monkey (DOT) com> wrote:

Hi,

I'm trying to align a checkbox vertically in a div, but I can't get it
to work:

div style="border: 1px solid black; height:100px;vertical-
align:middle;"
<input type="checkbox" style="vertical-align:middle;"/
/div

Is this not correct?

You need to add line-height: 100px to the DIV and line-height: normal to
the INPUT.

In fact, just adding line-height: 100px to the DIV and leaving the
checkbox as vertical-align: baseline (the default) will give a very
similar result. This is because the difference between line height and
font size is always distributed evenly above and below the line.

At the moment the checkbox is vertically aligned in the line box that
it's on, but its line box isn't 100px high, but some smaller amount
based on its font (in fact an amount usually not much higher than the
input element).