Solved

Why isn't this form centered?

Posted on 2013-06-21
5
238 Views
Last Modified: 2013-06-22
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
Comment
Question by:Rowby Goren
5 Comments
 
LVL 17

Assisted Solution

by:OmniUnlimited
OmniUnlimited earned 167 total points
Comment Utility
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
 

Expert Comment

by:Nikc-Nack
Comment Utility
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
 
LVL 16

Assisted Solution

by:rbudj
rbudj earned 166 total points
Comment Utility
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
 
LVL 15

Accepted Solution

by:
Jagadishwor Dulal earned 167 total points
Comment Utility
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
 
LVL 9

Author Closing Comment

by:Rowby Goren
Comment Utility
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now