使图像栅格中心响应(Make an image grid centre responsively)

2019-10-20 04:07发布

我有一个是由一大堆的div的图像的网格,在每个格是一个标题,一个小图片和说明。 当电网处于最大宽度,一切都坐在它居中。 当宽度开始改变降至适合在父DIV需要的列数,但我不知道如何把一切都居中(如果可能)。

在这里,我使用的代码的基础:

HTML

<div id="Parent Div">
        <Div class="gallery">
            <h6 align="center">Title</h6>
            <img class="gallery-picture" src="#">
            <p>Description</p>
        </Div> 
        <Div class="gallery">
            <h6 align="center">Title</h6>
            <img class="gallery-picture" src="#">
            <p>Description</p>
        </Div> 
        <Div class="gallery">
            <h6 align="center">Title</h6>
            <img class="gallery-picture" src="#">
            <p>Description</p>
        </Div> 
        <Div class="gallery">
            <h6 align="center">Title</h6>
            <img class="gallery-picture" src="#">
            <p>Description</p>
        </Div> 
   </div>

这里是CSS:

#Parent Div{
    margin-left:auto;
}

.gallery{
    margin-top:40px auto; 
    padding-bottom:20px;
    width:235px;
    float:left;
    height:350px;
}

.galley-picture{
    display:block;
    text-align:center;
    margin:10px auto 0;
    width:200px;
}

.gallery p{
    text-align:center;
    margin:10px auto 10px;
    padding: 0 21px 0 21px;
}

Answer 1:

您可以使用媒体查询display:inline-block;text-align:center;

这里是一个DEMO

HTML:

<div id="container">
    <div class="block">1</div>
    <div class="block">2</div>
    ...
</div>

CSS:

#container{
    font-size:0;
    margin:0 auto;
    width:1000px;
}
.block {
    font-size:20px;
    width: 150px;
    height: 150px;
    margin:25px;
    background: gold;
    display:inline-block;
}

@media screen and (max-width: 430px) {
    #container{
        width:200px;
    }
}

@media screen and (min-width: 431px) and (max-width: 630px) {
   #container{
        width:400px;
    }
}
@media screen and (min-width: 631px) and (max-width: 830px) {
   #container{
        width:600px;
    }
}
@media screen and (min-width: 831px) and (max-width: 1030px) {
   #container{
        width:800px;
    }
}


Answer 2:

Flexbox,就应该工作。

 #Parent{ margin-left:auto; } html,body,#Parent { height: 100%; } .valign-wrapper { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 100%; } .gallery{ margin-top:40px auto; padding-bottom:20px; width:235px; float:left; } .galley-picture{ display:block; text-align:center; margin:10px auto 0; width:200px; } .gallery p{ text-align:center; margin:10px auto 10px; padding: 0 21px 0 21px; } 
 <div id="Parent"> <div class="valign-wrapper"> <Div class="gallery"> <h6 align="center">Title</h6> <img class="gallery-picture" src="#"> <p>Description</p> </Div> <Div class="gallery"> <h6 align="center">Title</h6> <img class="gallery-picture" src="#"> <p>Description</p> </Div> <Div class="gallery"> <h6 align="center">Title</h6> <img class="gallery-picture" src="#"> <p>Description</p> </Div> <Div class="gallery"> <h6 align="center">Title</h6> <img class="gallery-picture" src="#"> <p>Description</p> </Div> </div> </div> 



文章来源: Make an image grid centre responsively