vertical align middle input field in a form

Ok I know this topic has been drowned out and I have read many
articles on this including my CSS cookbook third edition by Oreily. Im
stumped. Here is my div, all I want to do is vertically align it to
the middle of the div.

<div id="top_bluenav_bottom"><form id="signin" action=""
method="post"><input name="email" type="text" /> <input
name="password" type="password" /> <input name="submit" type="submit"
value="Sign In" /></form></div>

On 2009-08-04, cbielich (AT) gvchristian (DOT) com <cbielich (AT) gvchristian (DOT) com> wrote:

Ok I know this topic has been drowned out and I have read many
articles on this including my CSS cookbook third edition by Oreily. Im
stumped. Here is my div, all I want to do is vertically align it to
the middle of the div.

You mean you want the form in the middle of the div?

div id="top_bluenav_bottom"><form id="signin" action=""
method="post"><input name="email" type="text" /> <input
name="password" type="password" /> <input name="submit" type="submit"
value="Sign In" /></form></div

Set the div to display: table-cell and vertical-align: middle. Probably
won't work in IE.

Are you setting a height on the div? If so, there are a few other
options.

On Aug 4, 12:59*pm, Ben C <spams... (AT) spam (DOT) eggs> wrote:

On 2009-08-04, cbiel... (AT) gvchristian (DOT) com <cbiel... (AT) gvchristian (DOT) com> wrote:

Ok I know this topic has been drowned out and I have read many
articles on this including my CSS cookbook third edition by Oreily. Im
stumped. Here is my div, all I want to do is vertically align it to
the middle of the div.

You mean you want the form in the middle of the div?

div id="top_bluenav_bottom"><form id="signin" action=""
method="post"><input name="email" type="text" /> <input
name="password" type="password" /> <input name="submit" type="submit"
value="Sign In" /></form></div

Set the div to display: table-cell and vertical-align: middle. Probably
won't work in IE.

Are you setting a height on the div? If so, there are a few other
options.

yes the height is set here is the css for the div.

#top_bluenav_bottom {
text-align:left;
width:950px;
height:41px;
background-image:url(pics/top_bluenav_bottom.gif);
background-repeat:no-repeat;
}

On 2009-08-04, cbielich (AT) gvchristian (DOT) com <cbielich (AT) gvchristian (DOT) com> wrote:

On Aug 4, 12:59*pm, Ben C <spams... (AT) spam (DOT) eggs> wrote:
On 2009-08-04, cbiel... (AT) gvchristian (DOT) com <cbiel... (AT) gvchristian (DOT) com> wrote:

Ok I know this topic has been drowned out and I have read many
articles on this including my CSS cookbook third edition by Oreily. Im
stumped. Here is my div, all I want to do is vertically align it to
the middle of the div.

You mean you want the form in the middle of the div?

div id="top_bluenav_bottom"><form id="signin" action=""
method="post"><input name="email" type="text" /> <input
name="password" type="password" /> <input name="submit" type="submit"
value="Sign In" /></form></div

Set the div to display: table-cell and vertical-align: middle. Probably
won't work in IE.

Are you setting a height on the div? If so, there are a few other
options.

yes the height is set here is the css for the div.

#top_bluenav_bottom {
text-align:left;
width:950px;
height:41px;
background-image:url(pics/top_bluenav_bottom.gif);
background-repeat:no-repeat;
}

Well, you could try line-height: 41px on the div, display: inline on
the form, and vertical-align: middle on the input.