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。