I am currently developing a website using asp.net and c#. In my project, I have a gallery of images that I am struggling to center on the page. Here is what the gallery looks like: Gallery of images
What I would like to achieve is something similar to this example I created on a Wix site: Example that I made in the wix site
Here is a snippet of my style code:
<!DOCTYPE html>
<html>
<body>
<style>
body {
font-size: 13px;
font-family: Arial, Helvetica, sans-serif;
}
h2 {
font-size: 21px;
color: #008000;
}
p {
text-align: justify;
}
div.gallery {
display: block;
margin: 10px;
float: left;
text-align: center;
width: 252px;
}
/*mouse hover effect*/
div.gallery:hover {
/*border: 1px solid #777;*/
}
div.gallery img {
width: 252px;
height: 120px;
border: 1px solid #111;
}
div.desc {
padding: 15px;
text-align: center;
}
</style>
<h2>FUTEBOL</h2>
<div class="gallery">
<a target="_blank" href="Heliflex.jpg">
<img src="~/Imagens/Slide DS.jpg" alt="DOMO Slide DS">
</a>
<div class="desc">DOMO® Slide DS</div>
</div>
...continued image gallery code goes here...
</body>
</html>
I have already tried searching for solutions on the w3schools website without success. Additionally, I am unsure how to change the website icon. Here is an icon that I would like to use instead: This right here
If anyone could provide insight or guidance on these matters, I would greatly appreciate it. Thank you for your time!