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?

Answer 1

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/