使圖片網格中心響應

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>