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

嵌套在文本对齐中心内的

内联块非常有用。

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

Float for margin的替代方案：自动问题

2 个答案: