Question

我知道这是一个引出的问题，但我可以在网上找到所有我无法复制的例子。

我需要2个div盒子，300px;彼此相邻并且在中间居中。

我有以下代码

<div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
</div>

<style>
    .container {
        width:100%;
        text-align:center";
    }
    .box1 {
        float:left;
        width:300px;
    }
    .box2 {
        float:right;
        width:300px;
    }
</style>

无论出于何种原因，我可以将盒子彼此相邻但它仍然位于屏幕的左侧而不是中心。我只需要它们居中

Answer 1

示例：http://jsbin.com/ubanuf/12/edit（不是我的）

这是因为你float: left。有几种方法可以执行此操作，您可以添加display: inline-block;或添加margin: 0 auto;

.box1 {
        float:left;
        width:300px;
        display: inline-block;
    }
    .box2 {
        float:right;
        width:300px;
         display: inline-block;
    }

Answer 2

按照以下方式更改CSS

.container {
    width:100%;
    text-align:center;
}
.box1, .box2 {
    display: inline-block;
    width:300px;
}

如果您为inline-block text-align: center设置container，则

div元素将与文字对齐。你的CSS text-align: center";有额外的（“）双引号。

Answer 3

这是另一种方式（确实有很多！）：

.container {
    margin: 0 auto;
    width: 100px;
}
.box1 {
    width:50%;
    display: inline-block;
}
.box2 {
    float: right;
    width:50%;
    display: inline-block;
}

Answer 4

如果您使用inline-block，则两个子DIV之间会有多余空间，here是我的解决方案。

container {
    width:100%;
    text-align:center;
    font-size: 0; // hack the space
}
.container div{
    font-size: 16px; // hack "hack the space"
}
.box1 {
    display:inline-block;
    width:300px;
}
.box2 {
    display:inline-block;
    width:300px;
}

Answer 5

你不需要做任何事情。只需要在“％”中给出box1和box2的宽度，或者在“Pixel”中给出容器宽度。这将解决您的问题

喜欢这个

 <style>
    .container {
    width:100%; //or change it to 600px
    text-align:center";
   }
   .box1 {
    float:left;
    width:300px; //or change it to 50%
   }
   .box2 {
    float:right;
    width:300px; //or change it to 50%
   }
</style>

尝试将所有内容保存在“％”或“Pixel”中感谢

如何以特定宽度将2个div彼此相邻

5 个答案: