Question

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

我可以使用CSS display：table使其适用于所有其他浏览器（IE6和IE7除外）。 IE6和7没有这个，所以我找不到一个可行的解决方案来集中它们。

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

.container {文本对齐：中心;宽度：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>

Answer 1

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

你要做的是在不使用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）才能使其在IE＆lt; 8下工作; div会失败。如果您还有-moz-inline-box需要定位Firefox 2。）

Answer 2

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

你不需要使用display：table just margin：auto应该可以使用标准模式。

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

2 个答案: