CSS float「擁抱中心」？

Question

我有兩個不同的div，一個漂浮在左邊，一個漂浮在右邊。它們比整個頁面小得多（每個大約400x200），因此兩者相距甚遠，擁抱頁面的邊緣。我怎樣才能讓他們在中心相鄰？我試圖設置邊距爲自動和約20px，但它並沒有改變任何東西..

Answer 1

給他們一個父div「margin：0 auto; width：1000px;」

<div style="margin:0 auto; width:1000px;"> 
    <div style="float:left">Left</div> 
    <div style="float:right">Right</div> 
</div> 

或者，如果你希望他們緊挨着對方：

<div style="margin:0 auto;"> 
    <div style="float:left">Left</div> 
    <div style="float:left">Right</div> 
</div> 

Answer 2

這是inline-block工作！

http://jsfiddle.net/hyw6P/

<div id="container"> 
    <div id="left">Left!</div> 
    <div id="right">Right!</div> 
</div>​ 

#container{ 
text-align:center; 
width:100%; 
height:300px; 
border:1px solid black 
} 
#left{ 
border:3px solid blue; 
height:100px; 
width:100px; 
margin:auto; 
display:inline-block; 
} 
#right{ 
border:3px solid red; 
height:100px; 
width:100px; 
margin:auto; 
display:inline-block; 
}​ 

Answer 3

添加一個包裝DIV他們倆身邊。在包裝上設置寬度並將邊距頂部和底部設置爲0，將左側和右側設置爲自動。然後設置兩個浮動div的寬度以適合包裝，例如50％會使它們的寬度相同。

Answer 4

嘗試使用的z-index和位置絕對，或相對

繼承人的鏈接，幫助你的了

<div style="position: absolute; left: 610px; top: 80px; height: 400px; width: 100px; padding: 1em;">layer stuff</div> 

http://www.yourhtmlsource.com/stylesheets/csslayout.html

http://www.w3schools.com/html/default.asp

http://www.w3schools.com/html/default.asp

Answer 5

你可以用一個wrapper div來完成這個任務，並將子div設置爲內聯塊。

CSS：

#a, #b{ 
    border: 1px solid #999; 
    width: 100px; 
    display:inline-block; 
} 
​#container { 
    text-align:center; 
}​ 

HTML：

<div id="container"> 
    <div id="a">a</div> 
    <div id="b">b</div> 
</div> 

jsFiddle example。