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

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

转载作者：太空宇宙更新时间：2023-11-04 01:03:56

我正在尝试找出一种方法来使我网站以下页面上的照片网格居中:

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/

文章推荐： c - 特定的 sscanf 用法

文章推荐： javascript - 检查对象和属性是否存在

文章推荐： C读函数未定义错误: 0

文章推荐： node.js - 如何将express-session与ldap js集成

c# - 在C#中将 'var'的值初始化为null
这个问题在这里已经有了答案: How to initialize var? (11 个答案) 关闭 8 年前。我想给一个变量赋初值 null，并在下一个 if-else block 中赋值，但是编
javascript - 如何在 Babel 中将 * 导出为命名空间？
我正在使用 TypeScript 3.8 编写 JS 和 TS 混合的代码。我写了以下行: export * as Easing from './easing'; 应该是 fair game在 Typ
r - 在 R 中将 "/"更改为 "\"
我需要将 R 代码中的“/”更改为“\”。我有这样的事情: tmp <- paste(getwd(),"tmp.xls",sep="/") 所以我的 tmp是 c:/Study/tmp.xls 我希望
在 R 中将 cumsum 值重置为零
我有个问题。例如我有这个: id truth count 1 1 1 2 1 2 3 0 0 4 1 1 5 1 2 6 1
php - 在 Redbean 中将 IN 与其他条件一起使用
我正在尝试使用“IN”和“=”来查找一些 bean。我目前正在使用此代码: $ids = array(1,2,3,4); $user = 1; $things = R::find( 'thing'
在 Xcode 中将 iPhone 应用程序部署到别人的手机上
是否可以在 Xcode 中部署到其他人的手机上？我没有 iPhone，但我想测试我在 friend 手机上制作的应用程序。在我支付 99 美元之前，我想确保这不会造成麻烦。谢谢。最佳答案不会有任
不能在 C 中将 sscanf() 用于字符数组
我试图得到一个非常大的数字(超过 unsigned long long int )。所以我把它作为一个字符串，然后一个数字一个数字地转换成整数并使用它。 #include #include int
在 Rust 中将 C 指针转换为结构
我在 Rust 中有 C 语言库的绑定(bind)，但它们并不完整。在 C 代码中，我定义了一个简化的宏，如下所示: #define MY_MACROS1(PTR) (((my_struct1
javascript - 如何在 animate 中将 "+="赋值运算符与变量一起使用？
我正在努力解决这个问题。 http://jsfiddle.net/yhcqfy44/ 动画应该自动相对于滚动到顶部每次出现滚动条时的高度。我已经写了这个，但没有运气: var hheight =
在 Elixir 中将 JSON 字符串解析为整数
我正在处理一个将数字作为字符串返回的 JSON API。例如 "12" ，但是，该字段值也可以是非数字的，例如:"-" . 我已将 JSON 数据解析为映射，我想将此字段提取为 elixir 中的整数
c# - 在C#中将.wav文件转换为.aiff
我正在尝试编写一个类，将.wav文件转换为.aiff文件作为项目的一部分。我遇到了几个库Alvas.Audio(http://alvas.net/alvas.audio,overview.aspx)
在 Lucene 中将 n 个单词表达式索引为单个术语
我想在 Lucene 中将像“New York”这样的“复合词”索引为单个术语，而不是像“new”、“york”那样。这样，如果有人搜索“new place”，则包含“new york”的文档将不会匹
clojure - 在 clojure 中将 "or"操作定义为宏而不是简单地定义为函数有什么好处？
我希望这个解释能让我更好地了解使用宏的优点。最佳答案在函数中，所有参数在调用之前都会被评估。这意味着 or 作为函数不能是惰性的，而宏可以将 or 重写为 if 语句，该语句仅在以下情况下计算分
xslt - 不要在 XSLT 中将 > 转换为 >
我有一些看起来像这样的 XML foo ]]> (注意 > 登录 "> foo")和 XSLT 样式表当我运行xsltproc stylesheet.xs
kotlin - 如何在 Kotlin 中将 Any 转换到列表？
当我尝试将 Any 转换为 List 时，如下面的示例所示，我得到“Unchecked cast: Any!”到列表'警告。有没有解决此类问题的方法？ val x: List = objectOfTy
python - 在 Python 中将 & 转换为 &
我正在使用 Python 开发一个简单的爬虫。目的是创建一个 sitemap.xml。(你可以在这里找到真正的 alpha 版本:http://code.google.com/p/sitemappy/
excel - 在 VBScript 中将 IF 语句拆分为多行
我想知道在 VBScript 中是否可以在多行中中断 If 语句。喜欢: If (UCase(Trim(objSheet.Cells(i, a).Value)) = "YES") Or _ (UCas
java - 在 Java 中将 For 转换为 do while
for (String item : someList) { System.out.println(item); } 使用“do while”是否等效？谢谢。最佳答案如果列表为空，f
c - 在 C 中将 ","分隔列表拆分为数组的最佳方法是什么？
这个问题已经有答案了: 已关闭10 年前。 Possible Duplicate: Split string with delimiters in C 在 C 中将“，”分隔的列表拆分为数组的最佳方法
在 C 中将 char 数组转换为整数数组
我有一个如下所示的字符数组: [0, 10, 20, 30, 670] 如何将此字符串转换为整数数组？这是我的数组 int i=0; size_t dim = 1; char* array = (c

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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