在 IE6 和 IE7 中居中 2 个未知宽度的 div答案

【问题标题】：Centering 2 divs of unknown width in IE6 and IE7在 IE6 和 IE7 中居中 2 个未知宽度的 div
【发布时间】：2010-12-14 13:36:21
【问题描述】：

好的，如果我有 2 个 div（一个包含文本，另一个包含图像）会发生什么。图像始终具有静态宽度，但文本会有所不同。因此使其包含 div 变量。

我可以通过使用 CSS display:table 使其适用于所有其他浏览器（IE6 和 IE7 除外）。 IE6 和 7 没有，所以我找不到可行的解决方案来将它们全部居中。

...所以你知道我在说什么...

.container{text-align:center;宽度：100%}

.container .centered{display:table;边距：0 自动}

    <div class="container">
        <div class="centered">
            <div id="text">varying length text</div>
            <div id="image">IMAGE</div>
        </div>
    </div>

【问题讨论】：

您的代码与 IE7 中的代码相同。笏似乎是问题
好吧，当你使用display:table时，你不应该期望它在IE6上工作......你需要垂直和水平对齐吗？

标签： css

【解决方案1】：

除了缺乏 IE 支持之外，使用 display: table-row/table-cell 设置 display: table 就像没有其子项一样会导致未定义的行为。将块元素直接放在表格元素中是没有意义的，浏览器可能会做任何事情。

您要做的是在不使用float 的情况下获得缩小以适应宽度的行为，这是一种获得缩小宽度的正常方式，但要求相关块向左或向右而不是中心。可能更好的说法是使用inline-block：

.centered { text-align: center; }
.centered span { display: inline-block; border: dotted red 1px; }

<div class="centered">
    <span id="text">varying length text</span>
</div>
<div class="centered">
    <span id="image">IMAGE</span>
</div>

（您必须使用自然的-inline 元素，例如 span 才能使其在 IEdiv 会失败。如果您需要针对 Firefox 2，还有 -moz-inline-box。）

【讨论】：

很好的答案！内联块是关键。我最初只是在所有最近的浏览器中使用了没有子元素的 display:table，因为它在没有子元素的情况下完美地工作 - 我知道懒惰。一件事，您的解决方案不能完美运行，因为 .centered 类仍然使用 display:block 在 IE6 中作为默认值（并且 inline-block 在这里不起作用）只需添加 => .centered { text-align: center;显示：内联}
..err，它对我有用；将其设置为 display: inline 将使其不比其中的 span 宽，这会打破我所看到的居中（可能在您的上下文中有所不同）

【解决方案2】：

您使用的是 quirksmode 还是标准兼容模式？换句话说，您是否在 html 页面的顶部包含了 DOCTYPE 声明？

如果您使用的是标准模式，您不需要使用 display:table 只是 margin:auto 应该可以解决问题。

【讨论】：