作出响应的图像网格中心 [英] Make an image grid centre responsively

问题描述

我有一个由许多div组成的图像网格，在每个div内是一个标题，一个小图片和描述。当网格处于最大宽度时，一切都位于中心。当宽度开始改变时，它会根据需要减少适合父div的列数，但是我无法确定如何保持一切居中（或者如果可能）。

这里是我使用的代码的基础：

HTML

 code>< div id =Parent Div> 
< Div class =gallery> 
< h6 align =center>标题< / h6> 
< img class =gallery-picturesrc =＃> 
< p>说明< / p> 
< / Div> 
< Div class =gallery> 
< h6 align =center>标题< / h6> 
< img class =gallery-picturesrc =＃> 
< p>说明< / p> 
< / Div> 
< Div class =gallery> 
< h6 align =center>标题< / h6> 
< img class =gallery-picturesrc =＃> 
< p>说明< / p> 
< / Div> 
< Div class =gallery> 
< h6 align =center>标题< / h6> 
< img class =gallery-picturesrc =＃> 
< p>说明< / 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; 
} 
  

解决方案

p>

  #Parent {margin-left：auto;} html，body，＃Parent {height：100％;}。valign-wrapper {display： webkit-flex; display：-ms-flexbox;显示：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>标题< / h6> < img class =gallery-picturesrc =＃> < p>说明< / p> < / Div> < Div class =gallery> < h6 align =center>标题< / h6> < img class =gallery-picturesrc =＃> < p>说明< / p> < / Div> < Div class =gallery> < h6 align =center>标题< / h6> < img class =gallery-picturesrc =＃> < p>说明< / p> < / Div> < Div class =gallery> < h6 align =center>标题< / h6> < img class =gallery-picturesrc =＃> < p>说明< / p> < / Div> < / div> < / div>  

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

解决方案

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>

这篇关于作出响应的图像网格中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！