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

Question

我是网络开发新手，使用 float:left 制作了图像网格。但是我需要这个网格居中。我在这里看了很多问题，知道这两个人是一对不相容的吵架夫妻。我将 Display:block 添加到我所有的父级 div 和宽度中，稍微玩了一下清除，但网格似乎真的很浮动：留心。

在父级中居中放置此网格的正确方法是什么 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;
}

我也不确定如何在此处获取图像，所以我附上了它的外观图片。

Answer 1

在父级上使用 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>

Answer 2

嵌套在 text-align center 内的 inline-block 非常有用。

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

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

Alternatives to Float for margin: auto issues

html

css

css-float

centering