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/

使用div

text-align:center;

给内心div一个display:inline-block;而不是float

最好也把那个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％设置为两者并且有效。

BTW，外部div及其margin: 0 auto只会使自己居中而不是内部。

Answer 4

我会投票反对display: inline-block，因为它不支持浏览器，IE＆lt; 8具体而言。

.wrapper {
    width:500px; /* Adjust to a total width of both .left and .right */
    margin: 0 auto;
}
.left {
    float: left;
    width: 49%; /* Not 50% because of 1px border. */
    border: 1px solid #000;
}
.right {
    float: right;
    width: 49%; /* Not 50% because of 1px border. */
    border: 1px solid #F00;
}

<div class="wrapper">
    <div class="left">Div 1</div>
    <div class="right">Div 2</div>
</div>

编辑：如果需要在单元格之间没有间距，只需更改.left和.right即可使用float: left;

Answer 5

使用display: inline-block和text-align: center与中心对齐。

.outerdiv
{
    height:100px;
    width:500px;
    background: red;
    margin: 0 auto;
    text-align: center;
}

.innerdiv
{
    height:40px;
    width: 100px;
    margin: 2px;
    box-sizing: border-box;
    background: green;
    display: inline-block;
}

<div class="outerdiv">
    <div class="innerdiv"></div>
    <div class="innerdiv"></div>
</div>

使用display: flex和justify-content: center对齐中心

.outerdiv
{
    height:100px;
    width:500px;
    background: red;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.innerdiv
{
    height:40px;
    width: 100px;
    margin: 2px;
    box-sizing: border-box;
    background: green;
}

<div class="outerdiv">
    <div class="innerdiv"></div>
    <div class="innerdiv"></div>
</div>

使用display: flex，justify-content: center和align-items:center垂直和水平对齐中心。

.outerdiv
{
    height:100px;
    width:500px;
    background: red;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items:center;
}

.innerdiv
{
    height:40px;
    width: 100px;
    margin: 2px;
    box-sizing: border-box;
    background: green;
}

<div class="outerdiv">
    <div class="innerdiv"></div>
    <div class="innerdiv"></div>
</div>

Answer 6

直到现在更好的方式：

如果你给display：inline-block;对于内部div，然后内部div的子元素也将获得此属性并扰乱内部div的对齐。
更好的方法是为宽度，边距和浮动的内部div使用两个不同的类。

迄今为止的最佳方式：

使用flexbox。

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 7

请查看 flex ，它会帮助您正确行事，

在主div上设置css display :flex

div里面设置css：flex:1 1 auto;

附上jsfiddle链接作为示例享受：）

https://jsfiddle.net/hodca/v1uLsxbg/

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

7 个答案: