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

标签 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 屏幕上看起来是对称的，但最终它在移动设备和其他屏幕上看起来更糟。这似乎是一个简单的解决方案，但我一直无法找到正确的解决方案。我只需要将照片网格居中。

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

最佳答案

嗯，有很多话要说:

  • 有很多 </h>检查一下，我认为有错别字，但请在发帖前检查一下
  • 你应该避免<center> , 它在 html5 中已被弃用且不受支持，check W3 documentation
  • 你应该使用很多标题而不是 <p2>
  • 尽量避免在 img 中使用内联样式你可以用 css 来修饰它们

现在，您实际上可以在您的元素中使用网格。 在我的示例中，我包装了 h4和 img在分区中。

我拆分了 .row在 4 列中，使用 fr单位:1fr是可用空间的 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>

关于html - 在 CSS/HTML 中将图像网格居中的方法？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52596353/

上一篇：jquery - 如何让元素在父悬停时显示？

下一篇：css - 使用 custom.css 进行引导覆盖

相关文章：

java - JSoup "wrap"每次都没有按预期工作

javascript - 如何从 JSON 捕获数据并用 HTML 显示

html - 内联 block 中的文本垂直居中

android - 如何在 Android 的 ListView 中延迟加载图像

javascript - div的高度延伸到父div的高度？

html - 如何在页面加载时使切换按钮默认处于事件状态

Python 成像 : load jpeg from memory

javascript - 即使从另一个 HTML 页面重定向后，仍保留 HTML 中的表单值

html - 是什么给我的导航栏分配了相等的顶部和底部边距？

html - 让展开折叠框上下移动/插入主要内容

©2024 IT工具网  联系我们