Make an image grid centre responsively

问题

I have an image grid that is made up of a whole lot of divs, within each div is a heading, a small picture and a description. When the grid is at the maximum width, everything sits in it centred. When the width starts to change it drops the amount of columns that fit in the parent div as needed but I can't work out how to keep everything centred (or if it is possible).

Here the basis of the code I am using:

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>

Here is the 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;
}

回答1:

You can use media queries display:inline-block; and text-align:center;

Here is a 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;
    }
}

回答2:

Flexbox should work.

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

来源：https://stackoverflow.com/questions/23852393/make-an-image-grid-centre-responsively