How to put Rows And Columns in center of a Section - html

Question

I'm learning HTML and I'm working on this project where basically I'm trying to show 8 pictures inside a section with 4 each in one row. To solve this problem, I looked up how to make rows and columns without using Table (I'm not allowed to for this project).
I came across this:
* {
box-sizing: border-box;
}
/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
padding: 10px;
height: 300px; /* Should be removed. Only for demonstration */
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
<h2>Four Equal Columns</h2>
<div class="row">
<div class="column" style="background-color:#aaa;">
<h2>Column 1</h2>
<p>Some text..</p>
</div>
<div class="column" style="background-color:#bbb;">
<h2>Column 2</h2>
<p>Some text..</p>
</div>
<div class="column" style="background-color:#ccc;">
<h2>Column 3</h2>
<p>Some text..</p>
</div>
<div class="column" style="background-color:#ddd;">
<h2>Column 4</h2>
<p>Some text..</p>
</div>
</div>
I used this trick and made two Rows to solve my problem. I put these two Rows inside a <section> I created myself called gallery1:
.gallery1 {
align-items: center;
justify-content: center;
margin: auto;
}
Using above code, final code looks like this:
.whitetitle {
color: white;
}
.green {
background-color: #4AB19A;
}
.gallery1 {
align-items: center;
justify-content: center;
margin: auto;
}
.gallery1 img {
border: 1px solid whitesmoke;
border-radius: 90px;
margin: 15px;
height: 150px;
width: 150px;
}
.column {
align-items: center;
justify-content: center;
float: left;
display: flex;
width: 20%;
padding: 10px;
margin: auto;
}
.row:after {
content: "";
display: table;
clear: both;
align-items: center;
justify-content: center;
margin: auto;
}
<section class=" green gallery1">
<h2 class="whitetitle"> Graphic Designing </h2>
<section class="row">
<div class="column">
<img src="https://i.imgur.com/yX7UIXh.jpg">
</div>
<div class="column">
<img src="https://i.imgur.com/yX7UIXh.jpg">
</div>
<div class="column">
<img src="https://i.imgur.com/yX7UIXh.jpg">
</div>
<div class="column">
<img src="https://i.imgur.com/yX7UIXh.jpg">
</div>
</section>
<section class="row">
<div class="column">
<img src="https://i.imgur.com/yX7UIXh.jpg">
</div>
<div class="column">
<img src="https://i.imgur.com/yX7UIXh.jpg">
</div>
<div class="column">
<img src="https://i.imgur.com/yX7UIXh.jpg">
</div>
<div class="column">
<img src="https://i.imgur.com/yX7UIXh.jpg">
</div>
</section>
</section>
So it turned out good and all but I have a problem! I want the pictures to be in the center, horizontally and vertically. To be exact, I want the title and two rows to be in center, both ways.
I tried the following
align-items: center;
justify-content: center;
margin: auto;
Inside the Gallery in CSS but it didn't work. can anyone help me on this please? what should I have done to fix/avoid this.
Also, I tried flex-box thing and put display: flex; inside Gallery but it shows everything (title and two rows) in one row which is not what I want.

Answer 1

Since you have two sections you can simply wrap them into one section and give it class called main then apply the flex-box centralization on it.
Here is an Example
.whitetitle {
color: white;
}
.main {
background-color: #4AB19A;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.green {
text-align: center;
background-color: #4AB19A;
}
.gallery1 {
align-items: center;
justify-content: center;
margin: auto;
}
.gallery1 img {
border: 1px solid whitesmoke;
border-radius: 90px;
margin: 15px;
height: 150px;
width: 150px;
}
.column {
align-items: center;
justify-content: center;
float: left;
display: flex;
width: 20%;
padding: 10px;
margin: auto;
}
.row:after {
content: "";
display: table;
clear: both;
align-items: center;
justify-content: center;
margin: auto;
}
<section class="main">
<section class=" green gallery1">
<h2 class="whitetitle"> Graphic Designing </h2>
<section class="row">
<div class="column">
<img src="https://i.imgur.com/yX7UIXh.jpg">
</div>
<div class="column">
<img src="https://i.imgur.com/yX7UIXh.jpg">
</div>
<div class="column">
<img src="https://i.imgur.com/yX7UIXh.jpg">
</div>
<div class="column">
<img src="https://i.imgur.com/yX7UIXh.jpg">
</div>
</section>
<section class="row">
<div class="column">
<img src="https://i.imgur.com/yX7UIXh.jpg">
</div>
<div class="column">
<img src="https://i.imgur.com/yX7UIXh.jpg">
</div>
<div class="column">
<img src="https://i.imgur.com/yX7UIXh.jpg">
</div>
<div class="column">
<img src="https://i.imgur.com/yX7UIXh.jpg">
</div>
</section>
</section>
</section>
Or you can simply achieve it with the grid-box the following is an example
.whitetitle {
color: white;
}
.green {
background-color: #4AB19A;
display: grid;
text-align: center;
}
.gallery1 {
align-items: center;
justify-content: center;
margin: auto;
}
.gallery1 img {
border: 1px solid whitesmoke;
border-radius: 90px;
margin: 15px;
height: 150px;
width: 150px;
}
.column {
align-items: center;
justify-content: center;
float: left;
display: flex;
width: 20%;
padding: 10px;
margin: auto;
}
.row:after {
content: "";
display: table;
clear: both;
align-items: center;
justify-content: center;
margin: auto;
}
<section class=" green gallery1">
<h2 class="whitetitle"> Graphic Designing </h2>
<section class="row">
<div class="column">
<img src="https://i.imgur.com/yX7UIXh.jpg">
</div>
<div class="column">
<img src="https://i.imgur.com/yX7UIXh.jpg">
</div>
<div class="column">
<img src="https://i.imgur.com/yX7UIXh.jpg">
</div>
<div class="column">
<img src="https://i.imgur.com/yX7UIXh.jpg">
</div>
</section>
<section class="row">
<div class="column">
<img src="https://i.imgur.com/yX7UIXh.jpg">
</div>
<div class="column">
<img src="https://i.imgur.com/yX7UIXh.jpg">
</div>
<div class="column">
<img src="https://i.imgur.com/yX7UIXh.jpg">
</div>
<div class="column">
<img src="https://i.imgur.com/yX7UIXh.jpg">
</div>
</section>
</section>

Answer 2

All lines marked with /* <-- */ are new.
.whitetitle {
color: white;
margin-left: auto; /* <-- */
margin-right: auto; /* <-- */
text-align: center; /* <-- */
}
.green {
background-color: #4AB19A;
}
.gallery1 {
align-items: center;
justify-content: center;
margin: auto;
display: flex; /* <-- */
flex-wrap: wrap; /* <-- */
align-items: center; /* <-- */
justify-content: center; /* <-- */
}
.gallery1 img {
border: 1px solid whitesmoke;
border-radius: 90px;
margin: 15px;
height: 150px;
width: 150px;
}
.column {
align-items: center;
justify-content: center;
float: left;
display: flex;
width: 20%;
padding: 10px;
margin: auto;
}
.row::after {
content: "";
display: table;
clear: both;
align-items: center;
justify-content: center;
margin: auto;
}
<section class=" green gallery1">
<h2 class="whitetitle"> Graphic Designing </h2>
<section class="row">
<div class="column">
<img src="https://i.imgur.com/yX7UIXh.jpg">
</div>
<div class="column">
<img src="https://i.imgur.com/yX7UIXh.jpg">
</div>
<div class="column">
<img src="https://i.imgur.com/yX7UIXh.jpg">
</div>
<div class="column">
<img src="https://i.imgur.com/yX7UIXh.jpg">
</div>
</section>
<section class="row">
<div class="column">
<img src="https://i.imgur.com/yX7UIXh.jpg">
</div>
<div class="column">
<img src="https://i.imgur.com/yX7UIXh.jpg">
</div>
<div class="column">
<img src="https://i.imgur.com/yX7UIXh.jpg">
</div>
<div class="column">
<img src="https://i.imgur.com/yX7UIXh.jpg">
</div>
</section>
</section>