How Can I center This Form, Anyone.

[mandela10]

I am trying to put a form inside of a pop hover. Here is the screenshot below with the white opt in form inside but it's on the right, I want it to be in the middle.



Here is the Code

<table border="0" cellpadding="3" cellspacing="0"><tr><td><font face="Verdana" size="2"><p align="center"><strong>Sign up now To be Notified When We Have Sales and Giveaway Events </font></p><p align="center"><style>
.link,
.signupframe {
color: #030000;
font-family: Arial, Helvetica, sans-serif;
}
.link {
text-decoration: none;
}
.signupframe {
border: 1px solid #FFFFFF;
background: #F4EFEF;
}
</style>
<form method=post action="https://app.icontact.com/icp/signup.php" name="icpsignup" id="icpsignup2162" accept-charset="UTF-8" onsubmit="return verifyRequired2162();" >
<input type=hidden name=redirect value="http://www.icontact.com/www/signup/thanks.html" />
<input type=hidden name=errorredirect value="http://www.icontact.com/www/signup/error.html" />

<div id="SignUp" style="text-align: center;">
<table width="260" class="signupframe" border="0" cellspacing="0" cellpadding="5">
<tr>
<td valign=top align=center>
<font size="1" face="Arial,Helvetica, sans-serif">*</font> <font size="2">Email</font>
</td>
<td align=left>
<input type=text name="fields_email">
</td>
</tr>
<input type=hidden name="listid" value="15786">
<input type=hidden name="specialid:15786" value="2KF6">

<input type=hidden name=clientid value="569119">
<input type=hidden name=formid value="2162">
<input type=hidden name=reallistid value="1">
<input type=hidden name=doubleopt value="0">
<TR>
<TD> </TD>
<TD><font size="1">*</font><font size="2"> = Required Field</FONT></TD>
</TR>
<tr>
<td> </td>
<td><input type="submit" name="Submit" value="Submit"></td>
</tr>
</table>
</div>
</form>
<script type="text/javascript">

var icpForm2162 = document.getElementById('icpsignup2162');

if (document.location.protocol === "https:")

icpForm2162.action = "https://app.icontact.com/icp/signup.php";
function verifyRequired2162() {
if (icpForm2162["fields_email"].value == "") {
icpForm2162["fields_email"].focus();
alert("The Email field is required.");
return false;
}


return true;
}
</script></div>
<p align="center"><a class="link" href="http://www.icontact.com"><font size="2">Email Marketing You Can Trust</font></a>
</p></td></tr></table>

Please, Help me fix that

[Izzmo]

I'm surprised it's not centered, but you can put a style attribute in the table opening tag as such:

<table width="260" class="signupframe" style="margin: 0px auto;" border="0" cellspacing="0" cellpadding="5">
<tr>
<td valign=top align=center>
... rest of script ...

[nathan_s]

If the style attibute didn't help might as well add a div there

[FGTH]

Add this to your CSS declarations:

#SignUp {position:absolute; top: auto; left: 50%; margin-left: -130px;}

[dk44]

I've been having similar problems and the above solution works a treat - thanks!

[PowerSEO]

Use Text-Align:Center property. I tested and its working with your form

[TechnMist]

Centering can differ between browsers.

So setting text-align : center; is a wise move on all containers where centering is required (that can include the body and then perhaps text-align: left; the paragraphs).

The other method is the margin and that is the preferred W3C method, margin : 10px auto 10px auto;

the auto should balance the margin in the containing element, and it should end up looking centred, but some browsers don't support auto, and text-align: center; should also be set.