css - 将 float 元素集中在一个 div 容器中

Question

首先这个问题是不重复的，在你理解问题之前请不要将它标记为重复

我在容器 div 中有一个 float 元素，需要集中化。 这是应用 float: left

时元素的外观

大多数人同意为元素应用 display:inline-block 和为容器应用 text-align:center 就可以完成这项工作。但看看结果。 :(

我的问题是元素的最后一行，它应该向左浮动。 我需要一个同时结合 float 和内联 block 集中优势的解决方案，这可能吗？

 .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;
 }

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

Answer 1

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

如果是这样，只需从 .list-container 中删除 float : left 并安排以下内容:

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

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