将浮动项集中在div容器中

Question

首先，这个问题不重复，请不要在重复之前将其标记为重复

我在容器div中有一个需要集中的浮动项目。 这是应用float: left

时项目的外观

大多数人都同意对项目应用display:inline-block并为容器应用text-align: center将完成这项工作。但看看结果。 :(

我的问题是项目的最后一行，它应该浮动到左边。 我需要一个能够同时结合内联块的浮动和集中优势的解决方案，这可能吗？

＆＃13;

＆＃13;

 .post-item {   
    float:left;
    margin:10px;
    width:100px;
    height:120px;
    overflow: hidden;
    position: relative;
    background-color: #e9eaed;
    border: 1px solid #ff917b;
 }
 .grid-view{  
    float: left;
    background-color: white;
	margin: auto;
 }
 .list-container{
    float: left;
    background-color: #444444;
    padding: 20px;
 }

＆＃13;

<div class="list-container">
  <div class="grid-view">
    <div class="post-item">
    </div>
    <div class="post-item">
    </div>
    <div class="post-item">
    </div>
    <div class="post-item">
    </div>
    <div class="post-item">
    </div>
    <div class="post-item">
    </div>
    <div class="post-item">
    </div>
  </div>
</div>
  
  
  

＆＃13;

＆＃13;

＆＃13;

Answer 1

我认为.list-container是所有图片的容器，并且您希望图像作为一个组居中，但每个图像必须float : left？

如果有，请从float : left移除.list-container，然后安排以下内容：

.list-container{
   margin: 0 auto;
   display: block;
   width: auto;
}

这三个是响应地使容器居中所必需的。留下float : left的单个图像应该没问题。