View Full Version : vertically centering a form field

03-13-2009, 12:40 AM
EDIT: Figured it out...

Small problem that is driving me crazy... I have a search field within a table that will not center vertically for some reason... it sits at the very top.
I've tried valign center, margin-top: Xpx; (which just makes more space around the whole table for some reason, spacer gif, another table row to shove it down a bit.. nothing seems to work. It either sits at the very top or moves down and makes the table larger than it should be "45px height"

<table width="1000" border="0" cellspacing="0" cellpadding="0">
<td width="425" height="45" bgcolor="#000000"><img src="imagse/links.gif"></td>
<td width="65" align="left" bgcolor="#000000"><img src="images/toolbar-search.gif" alt="Search" width="55" height="45"></td>
<td width="160" align="left" valign="bottom" bgcolor="#000000"><form action="http://www.mysite.com/search" method="get" enctype="application/x-www-form-urlencoded" name="qs" id="qs"><input name="q" type="text" class="field" id="q" value="" size="15" maxlength="255"><input class="btn" name="btn" type="submit" id="btn2" value="Go"></form></td>
<td width="350" bgcolor="#000000"><div align="right"><img src="images/toolbar-slogan.jpg" width="350" height="45" border="0"></div></td>

03-13-2009, 10:26 AM
Get rid of the tables and make a semantic-accessible table less layout, to make your lief a lot easier!
After that, you may control the vertical alignment by setting a suitable line-height to its parent element.