• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 262
  • Last Modified:

Why isn't this form centered?

Hello,

I created a form that needs to be centered horizontally on the page.  But I'm not getting it quite right.  It's flush left.

Here's a link to the demo page:  Link to page with form.

Here's the css I am using unsuccessfully:
div#FormCentering {
width: 1011px;

}

form#chronoform_contactus {
width: 300px;
margin-left: auto ;
margin-right: auto ;
}

Open in new window

Looking forward to your solution...

Rowby
0
Rowby Goren
Asked:
Rowby Goren
3 Solutions
 
OmniUnlimitedCommented:
Don't try and center the form.  Add text-align: center to div#FormCentering and enclose the form in a fixed width containing div with the left, right margins set to auto and that should do it.   You can set text-align: left on the containing div if you don't want the text in the text boxes centered.
0
 
Nikc-NackCommented:
I took a quick look at your site and it appears that your division is not getting the proper alignment. Look at your template.css file on line 286. That CSS file is getting priority over whatever CSS that you may be trying to include. In the CSS at that location the margin is being set to 0; which is causing the division not to be centered.
I usually do not try to style forms, I would personally recommend enclosing the form in a division and centering the division.

I believe that fixing the margins would solve the problem though. Let me know if that works out for you.

- Nikc
0
 
rbudjCommented:
A quick work around until you figure out the priority... Inline CSS takes priority so adding a width and a margin to the div will place it in the center. You do not want text-align. That is for text and images.

<div id="FormCentering" style="text-align: center; width:300px; margin:auto;">
center-form.jpg
0
 
Jagadishwor DulalBraces MediaCommented:
Yes the main problem is your form width it's very large that's why it's not centered. Just change your css to :

div#FormCentering {
    margin-left: auto;
    margin-right: auto;
    width: 300px;
}

Open in new window

0
 
Rowby GorenAuthor Commented:
Hi

All of your comments and solutions were helpful not only in this form, but centering divs specifically.   So I have split the points.

And now my "form" fields are centered.

Thanks everyone for your help and insights.

Rowby
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now