div在容器中居中的内容

Question

在我的网站上，我有如下一系列的div：

.box{
   float:left;
   width:143px;
   height:183px;
   overflow:hidden;
}

这些div位于像这样的简单容器中：

.container{
   margin:70px 190px 0 190px;
   overflow:hidden;
}

我会意识到响应式布局，但div不在容器中居中。 我试图添加“ margin-left：auto;” 和“ margin-right：auto”，但什么也没有。 我有这样的布局：

相反，我会这样布局：

有人能帮我吗？

Answer 1

使用FlexBox的解决方案。

FlexBox指南

FlexBox浏览器兼容性

 .container { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; margin:7px 19px 0 19px; background-color: red; } .box { width:143px; height:183px; margin: 10px; background-color: black; } 

 <div class="container"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> 

Answer 2

看到这个小提琴

您可以使用display:inline-block;来实现display:inline-block; ，因此，请删除CSS中使用的float:left 。

我做了一个像下面的例子，

的HTML

<div class="container">
    <div class="div1">
    </div>
    <div class="div1">
    </div>
    <div class="div1">
    </div>
    <div class="div1">
    </div>
</div>

的CSS

.div1{
    margin:10px;
    width:25%;
    height:100px;
    display:inline-block;
    background-color:red;
}

Answer 3

您不能使用float实现此目的。 您可以使用display: inline-block 。

.box{
    width:143px;
    height:183px;
    overflow:hidden;
    display: inline-block;
}
.container{
    margin:70px 190px 0 190px;
    overflow:hidden;
    text-align: center;
}

Answer 4

 *{ padding: 0; margin: 0; box-sizing: border-box; } .container{ overflow: hidden; max-width: 500px; margin: 0 auto; } .box{ float:left; width: 31%; height: 183px; background: #f00; margin: 1%; } 

 <div class="container"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div>