Need help aligning sign-up box

3 replies
  • WEB DESIGN
  • |
Hi there!

I have a quick question. I'm looking align a sign-up form on my blog in the center, rather than on the left as it is hanging right now. I know how to align images, but this is using div tags and such which is a little beyond me. The code is taken from an affiliate site, so I did not create the image. The code is below, hope you all can help!

<div style="background: #FFFFCD; border: 1px solid #000; padding: 10px; width: 500px; font-family: Verdana; font-size: 12px;">
<form method="post" action="http://www.aweber.com/scripts/addlead.pl">
<input name="unit" type="hidden" id="unit" value="sitstayfetch" />
<input name="redirect" type="hidden" id="redirect" value="http://www.kingdomofpets.com/dogobediencetraining/?aff=changeid&amp;type=nohop&amp;su=1" />
<input name="meta_adtracking" type="hidden" id="meta_adtracking" value="changeidsignup" />
<input name="meta_message" type="hidden" id="meta_message" value="1" />
<input name="meta_required" type="hidden" id="meta_required" value="name,from" />
<input name="meta_forward_vars" type="hidden" id="meta_forward_vars" value="1" />
<p><span style="font-weight: bold; font-size: 14px; color: #CC0000;">YES!</span> I want to claim my free instant access to the Secrets to Dog Training 6 Day Dog Behavior and Training course ($27 value).</p>
<table width="95%" border="0" cellpadding="3" cellspacing="3" align="center">
<tr>
<td style="font-size: 12px;">Your Name: </td>
<td><input name="name" type="text" id="name" size="20" /></td>
<td rowspan="4"><img src="http://www.kingdomofpets.com/dogobediencetraining/images/newsletters/ebook-sistay_yellow.jpg" alt=" Secrets to Dog Training Free 6 Day Course" width="140" height="158" /></td>
</tr>
<tr>
<td style="font-size: 12px;">Your email Address:</td>
<td><input name="from" type="text" id="from" size="20" /></td>
</tr>
<tr>
<td> </td>
<td>
<input name="image" type="image" src="http://www.kingdomofpets.com/dogobediencetraining/images/newsbutton.gif" alt="SUBMIT!" />
</td>
</tr>
<tr>
<td colspan="2"><span style="color: #CC0000; font-size: 12px;">(This is a private and fully protected mailing list. You can unsubscribe at any time).</span></td>
</tr>
</table>
</form>
</div>
#aligning #box #signup
  • Profile picture of the author Jahnold
    Setting the left and right margins to auto should centre the div within whatever is containing it.

    Add:

    margin-left:auto; margin-right:auto;

    to the style section of the div

    -Matt
    {{ DiscussionBoard.errors[3668384].message }}
    • Profile picture of the author wm42150
      Is it possible to show exactly where the margin-left:auto; margin-right:auto; should be placed in the style section of the div? Maybe copy and paste for me exactly what that section should look like?

      When I try to put it where I think it should go, it does seem to center it, but the box and colors go a little haywire, spreading out as if there weren't a box anymore.
      {{ DiscussionBoard.errors[3668700].message }}
      • Profile picture of the author Nitro
        Adding this:

        margin: 0 auto;

        to your first div should center it.

        HTML Code:
        <div style="background: #FFFFCD; border: 1px solid #000; margin: 0 auto; padding: 10px; width: 500px; font-family: Verdana; font-size: 12px;">
        Signature
        {{ DiscussionBoard.errors[3669094].message }}

Trending Topics