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

好吧，如果我有2个div（一个包含文本，另一个包含图像）会发生什么。图像始终有一个静态宽度，但文字不同。因此使其包含div变量。在IE6和IE7中集中2个未知宽度的div

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

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

.container {文本对齐：中心;宽度：100％}

.container .centered {display：table; margin：0 auto}

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

来源

2009-11-09 Will

你的代码和IE7一样。 wat看起来是问题 – Treby 2009-11-09 09:10:14

那么，当你使用'display：table'时，你不应该指望它在IE6上工作......你需要垂直和水平对齐吗？ – Kobi 2009-11-09 09:18:55

除了缺少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 < 8下工作; div会失败还有-moz-inline-box如果你需要定位到Firefox 2）

来源

2009-11-09 10:51:29 bobince

很好的回答！内联块是关键。我只是最初使用display：table最初没有子元素的所有最新浏览器，因为它没有孩子完美的工作 - 懒惰我知道。一件事，你的解决方案并不完美，因为.centered类仍然使用IE6中的display：block作为默认值（并且内联块在这里不起作用）只需添加=> .centered {text-align：中央;显示：inline} – Will 2009-11-10 06:25:25

..err，它为我工作;设置为'display：inline'会使它不会比它内部的'span'更宽，这将会破坏我所看到的居中（也许在你的上下文中有不同的东西） – bobince 2009-11-10 09:59:08

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

你不应该需要使用显示：表只是余量：汽车应该做的伎俩，只要你使用的是标准模式。

来源

2009-11-09 09:51:55

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

回答

相关问题