浮动保证金的替代品：汽车问题答案

【问题标题】：Alternatives to Float for margin: auto issues浮动保证金的替代品：汽车问题
【发布时间】：2017-11-04 09:09:46
【问题描述】：

我是网络开发的新手，我使用 float:left 制作了一个图像网格。但是我需要这个网格居中。我在这里阅读了很多问题，并且知道这两个人是一对不相容的吵架已婚夫妇。我将 Display:block 添加到我所有的父 div 和宽度中，使用 clears 进行了一些操作，但网格似乎真的很喜欢 float: left to heart。

让这个网格在父 div 中居中的正确方法是什么？

<div class="maincontent">
    <div class="imgrid"> 
        <div class="col col-lg col-sm"><img src="images/5_2.jpg" alt=""></div>
        <div class="col col-lg col-sm"><img src="images/5_2.jpg" alt=""></div>
        <div class="col col-lg col-sm"><img src="images/5_2.jpg" alt=""></div>
        <div class="col col-lg col-sm"><img src="images/5_2.jpg" alt=""></div>
        <div class="col col-lg col-sm"><img src="images/5_2.jpg" alt=""></div>
        <div class="col col-lg col-sm"><img src="images/5_2.jpg" alt=""></div>
        <div class="col col-lg col-sm"><img src="images/5_2.jpg" alt=""></div>
        <div class="col col-lg col-sm"><img src="images/5_2.jpg" alt=""></div>
        <div class="col col-lg col-sm"><img src="images/5_2.jpg" alt=""></div>
        <div class="col col-lg col-sm"><img src="images/5_2.jpg" alt=""></div>
        <div class="col col-lg col-sm"><img src="images/5_2.jpg" alt=""></div> 
        <div class="col col-lg col-sm"><img src="images/5_2.jpg" alt=""></div> 
    </div>
</div><!--main content-->
</div> <!--wrap-->

还有 CSS：

.wrap {
    height: 100%;
    width: 100%;
    background:#B90609;
}

.maincontent{
    display:block;
    width: 80%;
    padding-top: 5%;
    margin:auto;
    background:#8810C5;
    clear:both; 
}

.col {
    float: left;
    background:#2A17D1;
    display:block
}
.col-sm {
    width: 40%;
    padding: 1%;
    height: auto;
    display:block;
}
.col-sm img{
    width: 100%;
    height: auto;
    display:block;
    overflow:hidden;
    display:block;
    clear:both;
}

我也不确定如何在此处获取图片，所以我附上了一张图片。

【问题讨论】：

你正在寻找弹性盒子。
有没有理由在 flexbox 上使用浮动？还是现在基本上已经过时了？
@duckyduck - 将浮动用于它们最初的用途 - 正文流动的侧块。

标签： html css css-float centering

【解决方案1】：

嵌套在文本对齐中心内的内联块非常有用。

<div style="text-align:center">
  <div style="display:inline-block;width:40%;height:100px;background:#ccf;">here</div>
  <div style="display:inline-block;width:40%;height:100px;background:#cff;">you</div>
  <div style="display:inline-block;width:40%;height:100px;background:#fcc;">go</div>
</div>

& 这里是你的 CSS 调整。

.wrap {
    height: 100%;
    width: 100%;
    background:#B90609;
}

.maincontent{
    display:block;
    width: 80%;
    padding-top: 5%;
    margin:auto;
    background:#8810C5;
    clear:both; 
    text-align:center; /*edit*/
}

.col {
    float: left;
    background:#2A17D1;
    display:block
}
.col-sm {
    width: 40%;
    padding: 1%;
    height: auto;
    display:inline-block; /*edit*/
}
.col-sm img{
    width: 100%;
    height: auto;
    display:inline-block; /*edit*/
    overflow:hidden;
    display:block;
    clear:both;
}

【讨论】：

像魅力一样工作，谢谢。你知道是否有理由真正使用浮动来代替 flexbox？还是花车过时了？
我可能是问错人了。我使用 css 已经 20 年了……现在还只是习惯了 flexbox。我更喜欢浮点数，因为我熟悉大多数伴随它们的错误。但是 flexbox 也非常有用。我不会说浮动已经过时了……基于表格的布局肯定已经过时了……如果浮动是下一个，我不会感到惊讶。顺便说一句，这是个好问题。

【解决方案2】：

在父级上使用display: flex; flex-wrap: wrap; justify-content: center; 来创建一个包含其内容并将其水平居中的行，您可以移除浮动。

.wrap {
    height: 100%;
    width: 100%;
    background:#B90609;
}

.maincontent{
    display:block;
    width: 80%;
    padding-top: 5%;
    margin:auto;
    background:#8810C5;
    clear:both; 
}

.imgrid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.col {
    background:#2A17D1;
    display:block
}
.col-sm {
    width: 40%;
    padding: 1%;
    height: auto;
    display:block;
}
.col-sm img{
    width: 100%;
    height: auto;
    display:block;
    overflow:hidden;
    display:block;
    clear:both;
}

<div class="maincontent">
    <div class="imgrid"> 
        <div class="col col-lg col-sm"><img src="images/5_2.jpg" alt=""></div>
        <div class="col col-lg col-sm"><img src="images/5_2.jpg" alt=""></div>
        <div class="col col-lg col-sm"><img src="images/5_2.jpg" alt=""></div>
        <div class="col col-lg col-sm"><img src="images/5_2.jpg" alt=""></div>
        <div class="col col-lg col-sm"><img src="images/5_2.jpg" alt=""></div>
        <div class="col col-lg col-sm"><img src="images/5_2.jpg" alt=""></div>
        <div class="col col-lg col-sm"><img src="images/5_2.jpg" alt=""></div>
        <div class="col col-lg col-sm"><img src="images/5_2.jpg" alt=""></div>
        <div class="col col-lg col-sm"><img src="images/5_2.jpg" alt=""></div>
        <div class="col col-lg col-sm"><img src="images/5_2.jpg" alt=""></div>
        <div class="col col-lg col-sm"><img src="images/5_2.jpg" alt=""></div> 
        <div class="col col-lg col-sm"><img src="images/5_2.jpg" alt=""></div> 
    </div>
</div><!--main content-->
</div>

【讨论】：