81

我正在进行一些高级 IE8 测试，似乎旧的使用技术margin: 0 auto;在 IE8 中并不适用于所有情况。

以下 HTML 在 FF3、Opera、Safari、Chrome、IE7 和 IE8 兼容中提供了一个居中按钮，但在 IE8 标准中没有：

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

（作为一种解决方法，我可以为按钮添加显式宽度）。

所以问题是：哪些浏览器是正确的？或者这是行为未定义的情况之一？

（我的想法是所有的浏览器都不正确——如果它是“显示：块”，按钮不应该是 100% 宽度吗？）

更新：我是个笨蛋。由于输入不是块级元素，因此我应该将其包含在带有“text-align：center”的 div 中。话虽如此，出于好奇，我仍然想知道按钮是否应该或不应该在上面的示例中居中。

赏金：我知道我在示例中做了一些奇怪的事情，正如我在更新中指出的那样，我应该将其对齐中心。对于赏金，我想参考回答的规范：

  1. 如果我设置“显示：块”，按钮的宽度应该是 100% 吗？或者这是未定义的？

  2. 由于显示是块状的，应该是“margin: 0 auto;” 使按钮居中，或不居中，或未定义？

4

12 回答 12

156

添加<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">解决问题

于 2010-10-05T21:48:55.540 回答
71

这是IE8中的一个错误。

从你的第二个问题开始：“margin：0 auto”使块居中，但仅当块的宽度设置为小于父级的宽度时。通常，它们是相同的。这就是为什么下面示例中的文本没有居中的原因。

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

一旦 b 元素的显示样式设置为块，它的宽度默认为父宽度。CSS 规范 10.3.3 正常流程中的块级、非替换元素描述了如何：“如果 'width' 设置为 'auto'，则任何其他 'auto' 值变为 '0' 并且 'width' 遵循结果相等。” 那里提到的平等是

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = 包含块的宽度

因此，通常所有的自动都会导致块宽度等于包含块的宽度。

但是，此计算不应应用于 INPUT，它是一个替换元素。被替换的元素包含在10.3.4 块级，正常流程中的替换元素中。那里的文字说：“'width'的使用值是根据内联替换元素确定的。” 10.3.2 内联替换元素的相关部分是：“如果'width' 的计算值为'auto'，并且元素具有固有宽度，则该固有宽度是'width' 的使用值”。

我猜CSS关心的场景是IMG元素。此示例中的 Stackoverflow 徽标将由所有浏览器居中。

<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>

INPUT 元素的行为方式应该相同。

于 2009-05-02T18:36:31.933 回答
5

是的，你可以阅读规范一百遍，并结合不同的点点滴滴，直到你有一个感觉正确的解释——但这正是浏览器供应商所做的，这就是我们处于今天这种情况的原因。

本质上，当您对元素应用 100% 的宽度时，如果该父元素是块元素，它应该扩展到其父元素宽度的 100%。margin: 0 auto;因为它已经占据了可用宽度的 100%，所以您不能再将其居中。

要将任何东西居中，margin: 0 auto;您需要定义一个明确的宽度。要使内联元素居中，您可以text-align: center;在父元素上使用，尽管如果父元素有其他子元素，这可能会产生不必要的副作用。

于 2009-05-03T09:14:55.457 回答
5

表单控件是CSS 中的替换元素。

10.3.4 正常流程中的块级替换元素

'width'的使用值与内联替换元素一样确定。然后应用非替换块级元素的规则来确定边距。

所以表单控件不应该被拉伸到 100% 宽度。

但是，它应该居中。它看起来像 IE8 中的一个普通错误。如果您设置特定宽度，它将使元素居中：

<input type="submit" style="display: block; width:100px; margin: 0 auto;" />
于 2009-05-04T04:06:08.640 回答
3

正如 buti-oxa 所解释的，这是 IE8 处理替换元素的方式的错误。如果您不想为按钮添加显式宽度，则可以将其更改为内联块并居中对齐内容：

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

如果您希望它在不支持 inline-block 的旧版本 Mozilla（包括 FF2）中工作，那么您可以添加display: -moz-inline-stack;到按钮。

于 2009-06-08T11:46:33.613 回答
2

至于这是与规范相关的“错误”；不是。作为帖子问题的作者，这种行为将是“未定义的”，因为 IE 中的这种行为仅发生在表单控件上，根据规范：

CSS 2.1 没有定义哪些属性适用于表单控件和框架，或者如何使用 CSS 来设置它们的样式。用户代理可以将 CSS 属性应用于这些元素。建议作者将此类支持视为实验性支持。

（http://www.w3.org/TR/CSS21/conform.html#conformance）

干杯!

于 2009-08-19T12:26:27.727 回答
2

再来一次：我们都讨厌 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>
于 2010-03-03T14:46:35.610 回答
2

尝试了以上所有方法，最终这样做

<div style="width:100%; background-color:red; text-align:center;">
        <div style="width:900px; margin:0 auto; background-color:blue;">
            hello
        </div>
    </div>
于 2012-04-08T21:11:24.243 回答
2

<!doctype html>在 HTML 输出的顶部添加。

于 2013-08-11T08:04:05.610 回答
1

如果按钮是“显示：块”，按钮不应该是 100% 宽度吗

不，这只是意味着它是垂直空间中唯一的东西（假设你没有使用其他技巧来强制那里的其他东西）。这并不意味着它必须填满该空间的宽度。

我认为您在这种情况下的问题是它input本身不是块元素。尝试将其嵌套在另一个 div 中并在其上设置边距。但是我目前没有 IE8 浏览器来测试这个，所以这只是一个猜测。

于 2009-03-19T14:10:22.337 回答
1

"margin: 0 auto" 仅当父元素具有 "text-align: center" 时才会在 IE 中居中元素。

于 2009-03-19T14:32:16.497 回答
0
  1. 假设margin: 0 auto元素应该居中，但宽度保持原样 - 无论计算结果如何，忽略任何边距设置。
  2. 如果您将<INPUT>标签设置为display:block，那么它应该以 为中心margin: 0 auto。

有关更多详细信息，请参阅视觉格式化模型详细信息 -从 CSS 2.1 规范计算宽度和边距。相关位包括：

在块格式化上下文中，每个框的左外边缘接触包含块的左边缘。

和

当一行上的行内框的总宽度小于包含它们的行框的宽度时，它们在行框中的水平分布由 'text-align' 属性确定。

最后

如果 'width' 设置为 'auto'，则任何其他 'auto' 值都将变为 '0' 并且 'width' 来自结果相等。

如果 'margin-left' 和 'margin-right' 都是 'auto'，则它们使用的值相等。这使元素相对于包含块的边缘水平居中。

于 2009-04-30T15:07:10.580 回答