如何在CSS / HTML中将图像网格居中？

时间：2018-10-01 17:52:16

标签： html css image center

我正在尝试找到一种方法来使我的网站下一页上的照片网格居中：

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屏幕上看起来很对称，但最终在移动设备和其他屏幕上看起来更糟。似乎很容易解决，但我一直找不到正确的解决方案。我只需要将焦点对准照片网格即可。

我们将不胜感激。

2 个答案:

答案 0 :(得分：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>

答案 1 :(得分：1)

嗯，有很多话要说：

  • 有很多</h>要检查，我认为有错字，但是请在发帖前检查
  • 您应避免使用<center>，它已被弃用，并且在html5 check W3 documentation中不支持
  • 您应该使用很多标题，而不要使用<p2>
  • 尝试避免在img中使用内联样式，可以在CSS中对其进行修饰

现在，您可以将网格实际用于项目了。 在我的示例中，我将h4和img分为div。

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

每个内部.column都声明了第一行（h1），而另一行则声明了：grid-auto-rows:300px，因此每个网格的总高度均为300px。

每个内部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>

相关问题
最新问题