Question

The following input type=submit buttons within and outside a div element centers with margin: auto when viewed in Firefox but not in Google Chrome:

HTML:

<div>
 <input type=submit value=submit>
</div>
<input type=submit value=submit>
text continues from here...

CSS:

div {
 width: 200px;
 background: green;
}

input {
 display: block;
 margin: auto;
}

According to W3C, is there a correct behaviour? And how does one centers it in Google Chrome noting that the width has to be a variable and that the button has to be cleared from the text below?

Answer 1

I suspect the problem is that you are not defining a width on input so it is not doing the auto margins.

INPUT is an inline element so it is easiest styled with ways that style inline elements, eg a text-align: center on the parent element.

http://jsfiddle.net/chrisvenus/wU5tb/ is a fiddle showing the effects of putting text-align: center on the two relevant parent elements (div and body).

Because this is styling the parent element you may find yourself needing to put in some extra block elements (eg p or div as appropriate) to take the centering style.

I’ve tested this on chrome, firefox and IE and all behave as expected.