Best IT Recipes

Using "margin: 0 auto;" in Internet Explorer 8

I am doing some preliminary testing of IE8, and it seems that the old method of using margin: 0 auto; not working in all cases in IE8.

The following HTML part gives a centered button in FF3, Opera, Safari, Chrome, IE7 and is compatible with IE8, but NOT in the IE8 standard:

 <div style="height: 500px; width: 500px; background-color: Yellow;"> <input type="submit" style="display: block; margin: 0 auto;" /> </div>

(In the process, I can add an explicit width to the button).

So the question is: which browsers are correct? Or is this one of those cases where the behavior is undefined?

(I think all browsers are wrong - shouldn't the button be 100% wide if it "displays: block"?)

UPDATE: I will be dunce. Since the input is not a block level element, I just had to contain it in a div with "text-align: center". Having said that, for the sake of curiosity, I would still like to know if the button should or should not be focused in the above example.

FOR BOUNTY: I know that I am doing strange things in the example, and as I point out in the update, I just had to center it. For generosity, I would like to get links to specifications that meet:

  • If I set "display: block", should the button be 100% wide? Or is it undefined

  • Since the display is a block, it should "margin: 0 auto;" center button or not, or undefined?

+80
html css internet-explorer-8
Mar 19 '09 at 2:05 p.m.
source share
12 answers

This is a bug in IE8.

Starting from the second question: "margin: 0 auto" centers the block, but only when the width of the block is set to a smaller width of the parent. Usually they become the same. This is why the text in the example below is not centered.

 <div style="height: 100px; width: 500px; background-color: Yellow;"> <b style="display: block; margin: 0 auto; ">text</b> </div>

Once the display style of element b is set to lock, its default width is equal to the width of the parents. CSS spec 10.3.3 Blocked elements at the block level in the normal flow describe how: "If" width "is set to" auto ", any other" auto "values ​​become" 0 ", and" width "follows from the resulting equality." The equality indicated there

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of contains block

So, usually all cars lead to the fact that the width of the block is equal to the width of the containing block.

However, this calculation should not apply to INPUT, which is a replaced item. Replaced elements are covered 10.3.4 Block, replaced elements in normal flow. The text says there: "The used value" width "is defined as for the built-in replaced elements." Relevant part 10.3.2 Inline, replaceable elements: "if" width "has the calculated value" auto ", and the element has an internal width, then this internal width is the used value" width ".

I think the CSS script takes care of the IMG element. The Stackoverflow logo in this example will be focused on all browsers.

 <div style="height: 100px; width: 500px; background-color: Yellow;"> <img style="display: block; margin: 0 auto; " border="0" src="http://stackoverflow.com/content/img/so/logo.png" alt=""> </div>

The INPUT element should behave the same.

+71
May 02 '09 at 18:36
source share

Adding <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> solves the problem

+155
05 Oct '10 at 21:48
source share

Yes, you can read the specification a hundred times and combine different pieces and fragments until you get the correct interpretation, but exactly what the developers of the browsers did and why we are in the situation we are in today.

In essence, when you apply a width of 100% to an element, it should extend 100% of its parent width if that parent is a block element. You can no longer center it with margin: 0 auto; since it already occupies 100% of the available width.

To center everything with margin: 0 auto; , you need to define an explicit width. To center the inline element, you can use text-align: center; in the parent, although this can have unwanted side effects if the parent has other children.

+5
May 03 '09 at 9:14
source share

Form controls are replaced by CSS elements.

10.3.4 Blocked Block Level Elements in Normal Flow

The used "width" value is defined as for inline replaceable elements . Then, the rules for non-replaced block level elements are applied to define the fields.

Thus, shape control should not stretch to 100% of the width.

However, it must be centered. This seems like a common bug in IE8. It centers the element if you specify a specific width:

 <input type="submit" style="display: block; width:100px; margin: 0 auto;" />
+5
May 4 '09 at 4:06
source share

As explained by buti-oxa, this is a mistake with the way IE8 handles replaced elements. If you do not want to add an explicit width to your button, you can change it to a built-in block and center the alignment of the content:

 <div style="height: 500px; width: 500px; background-color: Yellow; text-align: center;"> <input type="submit" style="display: inline-block;" /> </div>

If you want this to work on older versions of Mozilla (including FF2) that do not support the inline block, you can add display: -moz-inline-stack; to the button.

+3
Jun 08 '09 at 11:46
source share

Since this is a “mistake” in relation to the specification; this is not true. As the author of the posed questions, the behavior for this would be "undefined", since this behavior in IE occurs only on form controls, as in spec:

CSS 2.1 does not determine what properties apply to form controls and frames or how CSS can be used to style them. User agents can apply the CSS properties of these elements. Authors are encouraged to consider such support as experimental.

( http://www.w3.org/TR/CSS21/conform.html#conformance )

Hurrah!

+2
Aug 19 '09 at 12:26
source share

Once again: we all hate IE!

 <div style="width:100%;background-color:blue;"> <div style="margin:0 auto;width:300px;background-color:red;"> Not Working </div> </div> <div style="width:100%;background-color:green;text-align:center;"> <div style="margin:0 auto;width:300px;background-color:orange;text-align:left;"> Working, but dumb that you have to use text-align </div> </div>
+2
Mar 03
source share

I tried all of the above, in the end we will do it

 <div style="width:100%; background-color:red; text-align:center;"> <div style="width:900px; margin:0 auto; background-color:blue;"> hello </div> </div>
+2
Apr 08 2018-12-21T00:
source share

Add <!doctype html> at the top of your HTML output.

+2
Aug 11 '13 at 8:04 on
source share

should not be 100% button width if it is "display: block"

No. It just means that this is the only place in space vertically (unless you use another trick to force something else there). This does not mean that it should fill the width of this space.

I think your problem in this case is that input not initially a block element. Try nesting it in another div and set the field for this. But I don't have an IE8 browser to test this at the moment, so this is just an assumption.

+1
Mar 19 '09 at 14:10
source share

"margin: 0 auto" only centers the element in IE if the parent element has "text-align: center".

+1
Mar 19 '09 at 14:32
source share
  • Assuming margin: 0 auto , then the element should be centered, but the width remains as it is - regardless of what it is calculated, without taking into account any field settings.
  • If the <INPUT> set to display:block , then it should be centered using margin: 0 auto .

For more information, see Details of the Formatting Formatting Model — Calculating Width and Margins from CSS 2.1 Specifications. Relational bits include:

In the context of block formatting, each left outer edge touches the left edge of the containing block.

and

When the total width of the inline box on the line is less than the width of the line containing them, their horizontal distribution within the line box is determined by the text-align property.

finally,

If the parameter “width” is set to “auto”, any other values ​​of “auto” become “0” and “width” follows from the resulting equality.

If both "margin-left" and "margin-right" are "auto", their used values ​​are equal. This horizontally centers the element with respect to the edges of the containing block.

0
Apr 30 '09 at 15:07
source share


More articles:


All Articles