在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

回答

相關問題