Question

我有一个由大量div组成的图像网格，每个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>

响应地制作图像网格中心

2 个答案: