同一行和中心的两个Div对齐它们

Question

我有两个像这样的div

<div style="border:1px solid #000; float:left">Div 1</div>
<div style="border:1px solid red; float:left">Div 2</div>

我希望它们显示在同一行,所以我使用了float:left.

我希望他们两个都在页面的中心,所以我试图用另一个这样的div包装它们

<div style="width:100%; margin:0px auto;">
  <div style="border:1px solid #000; float:left">Div 1</div>
  <div style="border:1px solid red; float:left">Div 2</div>
</div>

但它不起作用.如果我将代码更改为此

<div style="width:100%; margin-left:50%; margin-right:50%">
  <div style="border:1px solid #000; float:left">Div 1</div>
  <div style="border:1px solid red; float:left">Div 2</div>
</div>

然后它会到达中心,但水平滚动条就在那里,看起来它并没有真正居中.

能否请您告诉我如何实现这一目标？谢谢.

编辑:我希望内部div(Div 1和Div 2)也是中心对齐.

Answer 1

你可以做到这一点

<div style="text-align:center;">
    <div style="border:1px solid #000; display:inline-block;">Div 1</div>
    <div style="border:1px solid red; display:inline-block;">Div 2</div>
</div>  

http://jsfiddle.net/jasongennaro/MZrym/

1. 它包装在一个div与text-align:center;
2. 给予内在的divsa display:inline-block;而不是afloat

最好也把那个css放在样式表中.

Answer 2

这可以帮你吗？检查我的JSFiddle

和代码:

HTML

<div class="container">
    <div class="div1">Div 1</div>
    <div class="div2">Div 2</div>
</div>

CSS

div.container {
    background-color: #FF0000;
    margin: auto;   
    width: 304px;
}

div.div1 {
    border: 1px solid #000;
    float: left;
    width: 150px;
}

div.div2 {
    border: 1px solid red;
    float: left;
    width: 150px;
}

Answer 3

两个浮动的 div 都需要有宽度！

将两者的宽度都设置为 50%，就可以了。

顺便说一句，外部 divmargin: 0 auto只会将自身居中，而不是内部的 div。