将 CSS/HTML 中的图像网格居中的方法？

Question

我正在想办法将我网站以下页面上的照片网格居中：

http://www.thefloodplains.com/Gallery

如您所见，所有网格化的内容似乎都自动向左浮动，而我希望它保持在中间并使页面对称。

这是我的 CSS:

h2 {
    color: #FF8B6F;
    text-decoration-color: #FF8B6F;
    font-size: 40px;
    padding-bottom: 3px;
}
h1 {
    font-size: 50px;
    font-family: 'Buenard', Garamond, 'EB Garamond', Georgia;
    color: #00A5D1;
    padding-bottom: -1px;
}
h {
    font-family: 'Buenard', Garamond, 'EB Garamond', Georgia;
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    }
p  {
    text-align: center;
    padding-top: 2px;
    }
p2 {
    font-size: 22px;
    margin-top: 1px;
    color: #00A5D1;
    }
div.containercenter {
    margin: 0px auto;
    align-content: center;
    margin-left: 58px; 
}    
hr {
    border: none;
    height: 2px;
    color: black;
    background-color: #FFE097;
    margin: 20px 0 20px 0;  
    padding: 4px;
}
.pad {
    margin-bottom: 2px;
    padding-bottom: 2px;
}    
/* Create four equal columns that floats next to each other */
.column {
    float: left;
    width: 23%;
    padding: 8px;
    margin-top: -22px;
}

.column img {
    margin-top: 12px;
    margin-bottom: 6px;
    width: 100%;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media (max-width: 800px) {
    .column {
        width: 50%;
    }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
    .column {
        width: 100%;
   }
}

/* adding the menu bar */

div.pad {
    padding-bottom: 24px;    
    }   

a.none {
        text-decoration: none;
        border-bottom: none;}      

.fullwidth {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    }     

ul.topnav {
    list-style-type: none;
    list-style:none;
    text-align:center;
    margin: 0;
    padding: 0;
    font-family: 'Buenard', Garamond, 'EB Garamond', Georgia, serif;
    font-weight: 700;
    overflow: hidden;
    opacity: 0.7;
    /* background: rgba(0, 0, 0, 0.85); */
    background-color: none;
}
ul.topnav li {display: inline;}

ul.topnav li a {
    display: inline-block;
    color: #FF8B6F;
    text-align: center;
    margin: 0px 0px;
    padding: 15px 15px;
    text-decoration: none;
    font-weight: 700;
}

.topnav-centered a {
  float: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

ul.topnav li a:hover:not(.active) {background-color: #00A5D1;}

ul.topnav li a.active {background-color: #00A5D1;}

ul.topnav li.left {float: left;}

@media screen and (max-width: 600px){
    ul.topnav li.right, 
    ul.topnav li {float: none;}
    ul.topnav li.left {float: none;}
}          

/* adding the menu bar */

div.pad {
    padding-bottom: 24px;    
    }   

a.none {
        text-decoration: none;
        border-bottom: none;}      

.fullwidth {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    }     

ul.topnav {
    list-style-type: none;
    list-style:none;
    text-align:center;
    margin: 0;
    padding: 0;
    font-family: 'Buenard', Garamond, 'EB Garamond', Georgia, serif;
    font-weight: 700;
    overflow: hidden;
    opacity: 0.7;
    /* background: rgba(0, 0, 0, 0.85); */
    background-color: none;
}
ul.topnav li {display: inline;}

ul.topnav li a {
    display: inline-block;
    color: #FF8B6F;
    text-align: center;
    margin: 0px 0px;
    padding: 15px 15px;
    text-decoration: none;
    font-weight: 700;
}

.topnav-centered a {
  float: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

ul.topnav li a:hover:not(.active) {background-color: #00A5D1;}

ul.topnav li a.active {background-color: #00A5D1;}

ul.topnav li.left {float: left;}

@media screen and (max-width: 600px){
    ul.topnav li.right, 
    ul.topnav li {float: none;}
    ul.topnav li.left {float: none;}
}

这是有问题的 HTML：

<!-- Photo Grid -->
<div class="row"> 
<!-- <div class="containercenter"> -->
  <div class="column">
    <h2><center>Albums</center></h>
    <img src="http://www.thegrassrootsgarage.com/wp-content/uploads/2016/05/Let-Loose-the-Floodgates.png" style="width:100%">
      <center><p2>Let Loose the Floodgates</p2></center>
    <img src="http://www.thegrassrootsgarage.com/wp-content/uploads/2017/08/Split-Artwork.jpg" style="width:100%">
      <center><p2>TYSFC / The FloodShark Split</p2></center>
    <img src="AnotherWilliamBlake.jpg" style="width:100%">
        <center><p2>Another William Blake</p2></center>

  </div>
  <div class="column">
    <h2><center>EPs</center></h>
    <img src="http://www.thegrassrootsgarage.com/wp-content/uploads/2016/05/Synthetic-Shark-Album-Art.png" style="width:100%">
        <center><p2>Synthetic Shark</p2></center>
    <img src="http://www.thegrassrootsgarage.com/wp-content/uploads/2016/05/The-Black-Butterfly.png" style="width:100%">
        <center><p2>The Black Butterfly</p2></center>

  </div>
  <div class="column">
    <h2><center>Singles</center></h>
    <img src="http://www.thegrassrootsgarage.com/wp-content/uploads/2016/05/HungryShark2-Alteration-2.jpg" style="width:100%">
        <center><p2>HungryShark</p2></center>
    <img src="HungrySharkSpotify.jpg" style="width:100%">
        <center><p2>HungryShark Alt</p2></center>  
    <img src="http://www.thegrassrootsgarage.com/wp-content/uploads/2017/07/The-Man-on-the-Porch-TGrG-cover.jpg" style="width:100%">
        <center><p2>The Man on the Porch</p2></center>
    <img src="http://www.thegrassrootsgarage.com/wp-content/uploads/2018/01/Sentimental-Shark-Art-Final-Art-Original.jpg" style="width:100%">
        <center><p2>Sentimental Shark</p2></center>
    <img src="http://www.thegrassrootsgarage.com/wp-content/uploads/2018/01/Sentimental-Shark-Art-cropped.jpg" style="width:100%">
        <center><p2>Sentimental Shark OG</p2></center>
    <img src="Kai.png" style="width:100%">
        <center><p2>Kai (rereleased)</p2></center>
    <img src="ComeWavesArt1.png" style="width:100%">
        <center><p2>Come Waves (rereleased)</p2></center>
    <img src="LasLuces2.png" style="width:100%">
        <center><p2>Las Luces</p2></center>
    <img src="LasLuces3.png" style="width:100%">
        <center><p2>Las Luces alt</p2></center>  

  </div>
    <div class="column">
    <h2><center>Logos / Misc</center></h>
    <img src="http://www.thegrassrootsgarage.com/wp-content/uploads/2017/12/Logo-1.jpeg">
        <center><p2>Shark Cans Classic</p2></center>
    <img src="http://www.thegrassrootsgarage.com/wp-content/uploads/2017/12/Shark-Logo-2.jpg">
        <center><p2>Shades of a Shark 1</p2></center>
    <img src="http://www.thegrassrootsgarage.com/wp-content/uploads/2017/12/Shark-Logo-2-Alt-1.jpg">
        <center><p2>Shades of a Shark 2</p2></center>
    <img src="http://www.thegrassrootsgarage.com/wp-content/uploads/2017/12/Shark-Logo-alt-6-green-sharpened.jpg">
        <center><p2>Shades of a Shark Green</p2></center>
    <img src="http://www.thegrassrootsgarage.com/wp-content/uploads/2017/12/Shark-Logo-alt-5-pink.jpg">
        <center><p2>Shades of a Shark Pink</p2></center>
    <img src="FloodSharkLogo2018.png">
        <center><p2>Shark Cans 2018</p2></center>    
    </div>
</div>

我已经尝试过简单的修复，甚至 "margin: 0" 类型的解决方案，但都没有奏效。我什至在左侧添加了填充以使其在我的 PC 屏幕上看起来是对称的，但最终它在移动设备和其他屏幕上看起来更糟。这似乎是一个简单的解决方案，但我一直无法找到正确的解决方案。我只需要将照片网格居中即可。

我们将不胜感激任何帮助。

Answer 1

使用起来更简单、更干净 CSS grid。

html,body{
  padding: 0;
  margin:0;
}

h2 {
  color: #ff8b6f;
  -webkit-text-decoration-color: #ff8b6f;
          text-decoration-color: #ff8b6f;
  font-size: 40px;
  padding-bottom: 3px;
}

h1 {
  font-size: 50px;
  font-family: "Buenard", Garamond, "EB Garamond", Georgia;
  color: #00a5d1;
  padding-bottom: -1px;
}

h {
  font-family: "Buenard", Garamond, "EB Garamond", Georgia;
  font-size: 32px;
  font-weight: bold;
  text-align: center;
}

p {
  text-align: center;
  padding-top: 2px;
}

p2 {
  font-size: 22px;
  margin-top: 1px;
  color: #00a5d1;
}

hr {
  border: none;
  height: 2px;
  color: black;
  background-color: #ffe097;
  margin: 20px 0 20px 0;
  padding: 4px;
}

.row {
  display: grid;
  grid-template-columns: repeat(4, 25%); //4 columns each row with a width of 25%
  grid-gap: 8px;
}

.column img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  margin-top: 12px;
  margin-bottom: 6px;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media (max-width: 800px) {
  .row {
    grid-template-columns: auto auto; //2 columns per row while browser window is less than 800px
  }
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .row {
    grid-template-columns: auto; //only 1 column per row while browser window is less than 800px
  }
  }
}

<!-- Photo Grid -->
<div class="row">
  <!-- <div class="containercenter"> -->
  <div class="column">
    <h2>
      <center>Albums</center>
      </h>
      <img src="http://www.thegrassrootsgarage.com/wp-content/uploads/2016/05/Let-Loose-the-Floodgates.png" style="width:100%">
      <center>
        <p2>Let Loose the Floodgates</p2>
      </center>
      <img src="http://www.thegrassrootsgarage.com/wp-content/uploads/2017/08/Split-Artwork.jpg" style="width:100%">
      <center>
        <p2>TYSFC / The FloodShark Split</p2>
      </center>
      <img src="AnotherWilliamBlake.jpg" style="width:100%">
      <center>
        <p2>Another William Blake</p2>
      </center>

  </div>
  <div class="column">
    <h2>
      <center>EPs</center>
      </h>
      <img src="http://www.thegrassrootsgarage.com/wp-content/uploads/2016/05/Synthetic-Shark-Album-Art.png" style="width:100%">
      <center>
        <p2>Synthetic Shark</p2>
      </center>
      <img src="http://www.thegrassrootsgarage.com/wp-content/uploads/2016/05/The-Black-Butterfly.png" style="width:100%">
      <center>
        <p2>The Black Butterfly</p2>
      </center>

  </div>
  <div class="column">
    <h2>
      <center>Singles</center>
      </h>
      <img src="http://www.thegrassrootsgarage.com/wp-content/uploads/2016/05/HungryShark2-Alteration-2.jpg" style="width:100%">
      <center>
        <p2>HungryShark</p2>
      </center>
      <img src="HungrySharkSpotify.jpg" style="width:100%">
      <center>
        <p2>HungryShark Alt</p2>
      </center>
      <img src="http://www.thegrassrootsgarage.com/wp-content/uploads/2017/07/The-Man-on-the-Porch-TGrG-cover.jpg" style="width:100%">
      <center>
        <p2>The Man on the Porch</p2>
      </center>
      <img src="http://www.thegrassrootsgarage.com/wp-content/uploads/2018/01/Sentimental-Shark-Art-Final-Art-Original.jpg" style="width:100%">
      <center>
        <p2>Sentimental Shark</p2>
      </center>
      <img src="http://www.thegrassrootsgarage.com/wp-content/uploads/2018/01/Sentimental-Shark-Art-cropped.jpg" style="width:100%">
      <center>
        <p2>Sentimental Shark OG</p2>
      </center>
      <img src="Kai.png" style="width:100%">
      <center>
        <p2>Kai (rereleased)</p2>
      </center>
      <img src="ComeWavesArt1.png" style="width:100%">
      <center>
        <p2>Come Waves (rereleased)</p2>
      </center>
      <img src="LasLuces2.png" style="width:100%">
      <center>
        <p2>Las Luces</p2>
      </center>
      <img src="LasLuces3.png" style="width:100%">
      <center>
        <p2>Las Luces alt</p2>
      </center>

  </div>
  <div class="column">
    <h2>
      <center>Logos / Misc</center>
      </h>
      <img src="http://www.thegrassrootsgarage.com/wp-content/uploads/2017/12/Logo-1.jpeg">
      <center>
        <p2>Shark Cans Classic</p2>
      </center>
      <img src="http://www.thegrassrootsgarage.com/wp-content/uploads/2017/12/Shark-Logo-2.jpg">
      <center>
        <p2>Shades of a Shark 1</p2>
      </center>
      <img src="http://www.thegrassrootsgarage.com/wp-content/uploads/2017/12/Shark-Logo-2-Alt-1.jpg">
      <center>
        <p2>Shades of a Shark 2</p2>
      </center>
      <img src="http://www.thegrassrootsgarage.com/wp-content/uploads/2017/12/Shark-Logo-alt-6-green-sharpened.jpg">
      <center>
        <p2>Shades of a Shark Green</p2>
      </center>
      <img src="http://www.thegrassrootsgarage.com/wp-content/uploads/2017/12/Shark-Logo-alt-5-pink.jpg">
      <center>
        <p2>Shades of a Shark Pink</p2>
      </center>
      <img src="FloodSharkLogo2018.png">
      <center>
        <p2>Shark Cans 2018</p2>
      </center>
  </div>
</div>

Answer 2

嗯，有很多话要说：

有很多</h>要检查，我认为有错字但请先检查post
您应该避免使用 <center>，它在 html5、check W3 documentation
你应该使用很多标题而不是 <p2>
尽量避免在 img 中使用内联样式，您可以在 css

现在，您实际上可以在您的项目中使用网格了。在我的示例中，我将 h4 和 img 包装在 div.

中

我将 .row 分成 4 列，使用 fr 单位：1fr 是可用 space 的 1 部分，网格间隙为 2%和 align-items: start（这样所有列元素都从顶部开始）。

每个内部 .column 声明了第一行 (h1)，另一行声明：grid-auto-rows:300px 因此每个网格的全高为 300 像素。

每个内部 img 设置为 place-self: center，每个 h4 设置为 place-self: end center（X 轴的第一个值，Y 轴的第二个值。）在此所有 h4 都设置在单元格底部的方式。

对于响应式版本，我将 .row 设置为只有 2 个单独的 fr 用于两列结果。

您可以找到最完整的网格布局指南here。

这是代码。

h1 {
    font-size: 50px;
    font-family: 'Buenard', Garamond, 'EB Garamond', Georgia;
    color: #00A5D1;
}
h2 {
    color: #FF8B6F;
    font-size: 40px;
    padding-bottom: 3px;
    text-align: center;
}
h4 {
    font-size: 22px;
    margin-top: 1px;
    color: #00A5D1;
    text-align: center;
}  

.row{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 2%;
  align-items: start;
}

.column{
  display: grid;
  justify-items: center;
  grid-template-rows: 1fr;
  grid-auto-rows: 300px;
}

.column div{
  display: grid;
}

.column img{
  place-self: center;
}

.column div h4{
  place-self: end center;
}





.column img {
    height: 75%;
}

/* Clear floats after the columns */


/* Responsive layout - makes a two column-layout instead of four columns */
@media (max-width: 800px) {
  .row{
    grid-template-columns: 1fr 1fr;
    grid-gap: 2%;
    align-items: start;
  }
}

<div class="row">
 <div class="column">
  <h2>Albums</h2>
  <div>
   <img src="http://www.thegrassrootsgarage.com/wp-content/uploads/2016/05/Let-Loose-the-Floodgates.png">
   <h4>Let Loose the Floodgates</h4>
  </div>
  <div>
   <img src="http://www.thegrassrootsgarage.com/wp-content/uploads/2017/08/Split-Artwork.jpg">
   <h4>TYSFC / The FloodShark Split</h4>
  </div>
  <div>
   <img src="AnotherWilliamBlake.jpg">
   <h4>Another William Blake</h4>
  </div>
 </div>

 <div class="column">
  <h2>EPs</h2>
  <div>
   <img src="http://www.thegrassrootsgarage.com/wp-content/uploads/2016/05/Synthetic-Shark-Album-Art.png">
   <h4>Synthetic Shark</h4>
  </div>
  <div>
   <img src="http://www.thegrassrootsgarage.com/wp-content/uploads/2016/05/The-Black-Butterfly.png">
   <h4>The Black Butterfly</h4>
  </div>
 </div>

 <div class="column">
  <h2>Singles</h2>
  <div>
   <img src="http://www.thegrassrootsgarage.com/wp-content/uploads/2016/05/HungryShark2-Alteration-2.jpg">
   <h4>HungryShark</h4>
  </div>
  <div>
   <img src="HungrySharkSpotify.jpg">
   <h4>HungryShark Alt</h4>
  </div>
  <div>
   <img src="http://www.thegrassrootsgarage.com/wp-content/uploads/2017/07/The-Man-on-the-Porch-TGrG-cover.jpg">
   <h4>The Man on the Porch</h4>
  </div>
  <div>
   <img src="http://www.thegrassrootsgarage.com/wp-content/uploads/2018/01/Sentimental-Shark-Art-Final-Art-Original.jpg">
   <h4>Sentimental Shark</h4>
  </div>
  <div>
   <img src="http://www.thegrassrootsgarage.com/wp-content/uploads/2018/01/Sentimental-Shark-Art-cropped.jpg">
   <h4>Sentimental Shark OG</h4>
  </div>
  <div>
   <img src="Kai.png">
   <h4>Kai (rereleased)</h4>
  </div>
  <div>
   <img src="ComeWavesArt1.png">
   <h4>Come Waves (rereleased)</h4>
  </div>
  <div>
   <img src="LasLuces2.png">
   <h4>Las Luces</h4>
  </div>
  <div>
   <img src="LasLuces3.png">
   <h4>Las Luces alt</h4>
  </div>
 </div>

 <div class="column">
  <h2>Logos / Misc</h2>
  <div>
   <img src="http://www.thegrassrootsgarage.com/wp-content/uploads/2017/12/Logo-1.jpeg">
   <h4>Shark Cans Classic</h4>
  </div>
  <div>
   <img src="http://www.thegrassrootsgarage.com/wp-content/uploads/2017/12/Shark-Logo-2.jpg">
   <h4>Shades of a Shark 1</h4>
  </div>
  <div>
   <img src="http://www.thegrassrootsgarage.com/wp-content/uploads/2017/12/Shark-Logo-2-Alt-1.jpg">
   <h4>Shades of a Shark 2</h4>
  </div>
  <div>
   <img src="http://www.thegrassrootsgarage.com/wp-content/uploads/2017/12/Shark-Logo-alt-6-green-sharpened.jpg">
   <h4>Shades of a Shark Green</h4>
  </div>
  <div>
   <img src="http://www.thegrassrootsgarage.com/wp-content/uploads/2017/12/Shark-Logo-alt-5-pink.jpg">
   <h4>Shades of a Shark Pink</h4>
  </div>
  <div>
   <img src="FloodSharkLogo2018.png">
   <h4>Shark Cans 2018</h4>
  </div>
 </div>
  
</div>

将 CSS/HTML 中的图像网格居中的方法？

Way to center a grid of images in CSS/HTML?

html

css

image

center