Css 如何以特定宽度将两个div相邻居中

我知道这是一个旷日持久的问题，但由于某些原因，我在网上找到了所有的例子，我无法复制

我需要2个300像素的div盒；宽彼此相邻，以中间为中心。

我有以下代码

<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>

.集装箱{
宽度：100%；
文本对齐：居中“；
}
.box1{
浮动：左；
宽度：300px；
}
.box2{
浮动：对；
宽度：300px；
}

无论出于什么原因，我都可以让这些框挨着一个，但它会留在屏幕的左侧，而不是中间。我只需要它们居中即可。

示例：（不是我的）

这是因为您有

float:left

。有几种方法可以做到这一点，您可以添加

display:inline块；

或添加

margin:0 auto；

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

---

更改CSS如下

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

内联块

元素将与文本对齐，如果您为

容器

div

设置

文本对齐：居中

。 在CSS

文本对齐：中间有额外的（“）双引号”

还有另一种方法（确实有很多！）：

---

如果使用

内联块

，则两个子div之间存在冗余空间，这是我的解决方案

容器{
宽度：100%；
文本对齐：居中；
字体大小：0；//破解空间
}
.货柜组{
字体大小：16px；//hack“hack the space”
}
.box1{
显示：内联块；
宽度：300px；
}
.box2{
显示：内联块；
宽度：300px；
}

您不需要做任何事情。只需在“%”中指定框1和框2的宽度，或在“像素”中指定容器的宽度。这将解决您的问题

像这样

 <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>

.集装箱{
宽度：100%；//或将其更改为600px
文本对齐：居中“；
}
.box1{
浮动：左；
宽度：300px；//或将其更改为50%
}
.box2{
浮动：对；
宽度：300px；//或将其更改为50%
}

尝试将所有内容保持在“%”或“像素”中 谢谢

爱你：）谢谢你做到了

 <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>