包裝部和內部中心對齊

這是我的html代碼看起來很像。包裝部和內部中心對齊

<div style="width:70%; margin:0px auto; border:1px solid #000;"> 

<div style="float:left; width:100px; border:1px solid #000;">Test</div> 
<div style="float:left; border:1px solid #000;">Test</div> 

</div>

輸出結果如下所示。

http://imm.io/7PWG

正如你所看到的，包裝DIV是在瀏覽器的中心，而是兩個內部的div都在左側。我希望他們在包裝div的中心。

任何方式來做到這一點？請幫助我。謝謝。

來源

2011-08-03 spotlightsnap

這不會幫助你的對齊問題，但我認爲你需要兩個內部的div後添加一個「明確的div」，使得DIV邊框內的div圍繞顯示：''

– Curt

display: inline-block可以在一個合理的簡單的方式做到這一點：

<div style="width:70%; margin:0px auto; border:1px solid #000; overflow:hidden; text-align:center"> 
    <div style="display:inline-block; vertical-align:top; text-align:left"> 
     <div style="float:left; width:100px; border:1px solid #000;">Test</div> 
     <div style="float:left; border:1px solid #000;">Test</div> 
    </div> 
</div>

參見：http://jsfiddle.net/LJaDd/

我裹了新div圍繞着你的內心兩個div s，並給它display: inline-block。
我加text-align: center到外div居中包裝div，然後加入text-align: left到包裝div到文本對齊內回到左邊。
我向外div添加了overflow: hidden以便它contains the floated divs。

來源

2011-08-03 08:55:56 thirtydot

謝謝，它的工程除IE外，好像內聯塊不工作跨瀏覽器？ – spotlightsnap

它只適用於IE6/7中的自然內聯元素，但幸運的是它很容易修復，[見這裏]（http://stackoverflow.com/questions/5838454/inline-block-doesnt-work-in-internet-explorer -7-6/5838575＃5838575）。以下是我在IE6/7中可以工作的答案中的一個固定版本：http://jsfiddle.net/LJaDd/1/ – thirtydot

謝謝。這是完美的：D – spotlightsnap

我認爲這將是有益的：http://www.pmob.co.uk/pob/centred-float.htm

來源

2011-08-03 08:51:18 lamelas

試試這個...

<div style="width:70%; margin:0px auto; border:1px solid #000; background-color: yellow;"> 
    <div> 
     <div style="float:left;width:100px; border:1px solid #000;">Test</div> 
     <div style="float:left;border:1px solid #000;">Test</div> 
    </div> 
</div>

浮動：左側是造成你內心的div 2走一路到左側，而不是居中。把它們放入另一個修復它的div中。

這裏是在行動... http://jsfiddle.net/sixgun/mp3T2/

來源

2011-08-03 08:54:33

姆，沒了outpout是一樣的。 – spotlightsnap

包裝部和內部中心對齊

回答

相關問題