Способ центрирования сетки изображений в 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», но пока ничего не помогло.Я даже добавил отступы на левой стороне, чтобы он казался симметричным на экране моего ПК, но затем он выглядит намного хуже на мобильных и других экранах.Кажется, это легко исправить, но я не смог найти правильного решения.Мне просто нужно сосредоточиться на сетке фотографий.

Любая помощь будет принята с благодарностью.

Answer 1

Ну, есть, что сказать:

• Есть много </h>, чтобы проверить, я думаю, что есть опечатка, но, пожалуйста, проверьте перед публикацией
• Вам следует избегать <center>, он устарел и не поддерживается в html5, проверить документацию W3
• Вы должны использовать много заголовков вместо <p2>
• Попробуйтечтобы избежать встроенного стиля в img, вы можете добавить их в CSS

Теперь вы можете использовать grid для своего проекта.В моем примере я обернул 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 для двухРезультат столбца.

Вы можете найти наиболее полное руководство по разметке сетки здесь .

Вот код.

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>

Answer 2

Использовать проще и чище Сетка CSS .

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>