Center a form that contains a button in a div

Question

I'm trying to align a <form> to be centered in a <div>. This is what I've done till now:

<div style="height:auto; margin: 0 auto; align:center;">
  <form style="width:50%; margin:0 auto;" onSubmit="return false;">
  </form>
</div>

This centers the form, but is there any other way to do this on a more professional way?

I also have a button in this form which is aligned left by default. I tried to change the alignment but it failed.

Who can help me?

There are too many meanings of more professional. Do you want the code to look as if a professional done it, or the form to look more professional? — , Dec 21 '11 at 19:41

Jason Gennaro · Accepted Answer · 2011-12-21T19:48:52.347

18

Simplest way is to remove the CSS from the HTML and remove the align:center.

That way the button aligns naturally to the left.

div{
    height:auto; 
    margin:0 auto; 
    border:1px solid blue;
}

form{
    border:1px solid red;
    width:50%; 
    margin:0 auto;
}

HTML

<div>
  <form>
      <button></button>
  </form>
</div>

Example: http://jsfiddle.net/kCt7k/

EDIT:

I need the button to be centered.

Sorry, misread that in the original Q.

In that case, you can use text-align:center

form{
    border:1px solid red;
    width:50%; 
    margin:0 auto;
    text-align:center;
}

Example 2: http://jsfiddle.net/kCt7k/1/

However, this may mess with the other elements in the form.

You could just set the button as a block element and apply margins to it.

button{
    width:100px;
    display:block;
    margin:0 auto;
}

Example 3: http://jsfiddle.net/kCt7k/2/

edited Dec 21 '11 at 19:48

answered Dec 21 '11 at 19:41

Jason Gennaro

34,535
8
65
86

I need the button to be centered. – sikas Dec 21 '11 at 19:46
that is great, but, I need to have only the button to be centered, not all the form elements. – sikas Dec 21 '11 at 19:52
You did not mention that `align` is not even a CSS property. – Sparky Dec 21 '11 at 20:00
You're right @Sparky672. I just told the OP to remove it altogether. – Jason Gennaro Dec 21 '11 at 20:04
You have the best (and most complete) answer on this page (+1) but I was surprised nobody else caught it. – Sparky Dec 21 '11 at 20:09

Sparky · Answer 2 · 2011-12-21T20:07:28.753

1

[is] there any other way to be more professional?

<div style="height:auto; margin: 0 auto; align:center;">

Nobody else mentioned this error, but align is not a CSS property.

Perhaps you meant align as a <div> attribute...

<div align="center">

However, that's been deprecated, so centering horizontally within a <div> would be properly done with text-align...

<div style="text-align: center;">

edited Dec 21 '11 at 20:07

answered Dec 21 '11 at 19:52

Sparky

98,165
25
199
285

score 0 · Answer 3 · answered Dec 21 '11 at 19:40

0

Being "more professional" might entail moving your style attributes to a separate CSS file. Other than that, this seems like a perfectly reasonable approach.

Would you like me to guess what you did with the button that is wrong?

answered Dec 21 '11 at 19:40

Jonathan Wood

65,341
71
269
466

but the button is not centered! – sikas Dec 21 '11 at 19:52
It's not really a perfectly reasonable approach if he's using imaginary CSS properties (`align`). – Sparky Dec 21 '11 at 20:16
@sikas: What do you think I meant with the comment about guessing what you did wrong with the button. You didn't show what you did, so I had no comment about that. – Jonathan Wood Dec 22 '11 at 02:50

score 0 · Answer 4 · answered Dec 21 '11 at 19:43

The css is fine, but IMO the "correct" way to do this would be through a separate css file. Same with the onsubmit that should be through seperate jquery or js. For the button issue I'd need to see the css from the style sheet and any inline css you are using. could be any number of reasons that something else is overriding the behavior you want.

One tip with css is if the element isn't behaving correctly, put a 1px solid colored border around it and then you can see where it is being rendered in the browser. You can then put borders around the other items and see where things are overlapping or pushing an element out of the position you want.

Center a form that contains a button in a div

4 Answers4