I am trying to achieve a layout where all the images are centered, with five images in the first row and the rest in the second row, also centered. Below is the code I have attempted:
<section id="Section">
<h1 class="sectionTitle text-center">Images</h1>
<div class="row center" id="Logo">
<!-- All logo from firestore -->
</div>
</section>
For fetching data from Firestore, here is my JavaScript code:
db.collection('images').orderBy('image').onSnapshot((snapshot) => {
//insertHtml("#main-content", response);
snapshot.docs.forEach(doc => {
var brand = '<div class="column">'
+ '<img src="images/'+ doc.data().image + '"></div>';
$("#Logo").append(brand);
});
});
And here's my CSS code for styling:
#Section .center {
display: block;
margin-left: auto;
margin-right: auto;
width: 80%;
}
#Section .row .column {
float: left;
width: 20%;
}
#Section .row .column img{
max-height: 115px;
max-width: 210px;
}
Currently, the first row displays correctly with 5 images, but the second row is not centered. How can I resolve this issue? https://i.sstatic.net/GjXYZ.jpg