Need Help Centering Images with CSS - html

Question

so I'm very rusty on html and css. I'm currently working on a project for school. I've created all the css properties for my 10 photos to do what I want them to do (border changes color when scrolled over). However, for the life of me, I can't figure out how to center the images. I'm trying to center three images per line, with one extra image. Any suggestions would be greatly appreciated. Again, I'm really rusty so it might be a simple fix.
div.gallery {
margin: 5px;
border: 5px solid white;
float: left;
width: 400px;
}
div.gallery:hover {
border: 5px solid yellow;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
a.ex1:hover,
a.ex1:active {
color: yellow;
}
a.ex2:hover,
a.ex2:active {
color: yellow;
}
a.ex3:hover,
a.ex3:active {
color: yellow;
}
a.ex4:hover,
a.ex4:active {
font-size: 200%;
color: yellow;
}
img {
text-align: center;
}
<h1 class="work1">
<center><a class="ex1">Photography Assignment</a></center>
</h1>
<center>
<div class="gallery">
<a target="_blank" href="images/SS1.png">
<img src="images/SS1.png" alt="Margaret's bag" height="200" width="300">
</a>
<div class="desc">An extreme close up of Margaret's bag</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS2.png">
<img src="images/SS2.png" alt="Margaret's notes" height="200" width="300">
</a>
<div class="desc">A picture of Margaret's bag</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS3.png">
<img src="images/SS3.png" alt="Close up of Margaret's face" height="200" width="300">
</a>
<div class="desc">A close up of Margaret against a pink house</div>
</div>
<br>
<br>
</center>
<div class="gallery">
<a target="_blank" href="images/SS4.png">
<img src="images/SS4.png" alt="A medium shot of Margaret" height="200" width="300">
</a>
<div class="desc">A medium shot of Margaret</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS5.png">
<img src="images/SS5.png" alt="A medium long shot of Margaret" height="200" width="300">
</a>
<div class="desc">A medium long shot of Margaret</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS6.png">
<img src="images/SS6.png" alt="A long shot of Margaret in motion" height="200" width="300">
</a>
<div class="desc">A long shot of Margaret in motion</div>
</div>
<br>
<div class="gallery">
<a target="_blank" href="images/SS7.png">
<img src="images/SS7.png" alt="A upward medium shot of Margaret" height="200" width="300">
</a>
<div class="desc">An upward medium shot of Margaret</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS8.png">
<img src="images/SS8.png" alt="A telephoto shot of a sunflower with Margaret in the background" height="200" width="300">
</a>
<div class="desc">A telephoto shot of a sunflower with Margaret in the background</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS9.png">
<img src="images/SS9.png" alt="A telephoto shot of Margaret" height="200" width="300">
</a>
<div class="desc">A telephoto shot of Margaret</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS10.png">
<img src="images/SS10.png" alt="A wide shot of Margaret getting into a firetruck" height="200" width="300">
</a>
<div class="desc">A wide shot of Margaret</div>
</div>
<br>
<h1>
<center><a class="ex1">Poster Assignment</a></center>
</h1>

Answer 1

As i can not post a comment so , You can add following to the img tag or you can use a class name using ' . '
img {
display: inline-flex;
margin : 0 auto;
}

Answer 2

Just add text-aling: center to your gallery class.
You also can do it in other ways (such as flexbox), but here is the easiest way.
Hope it will help.
.gallery {
margin: 5px;
border: 5px solid white;
float: left;
width: 400px;
text-align: center;
}
.gallery:hover {
border: 5px solid yellow;
}
.gallery img {
max-width: 100%;
height: auto;
}
.desc {
padding: 15px;
text-align: center;
}
a.ex1:hover,
a.ex1:active {
color: yellow;
}
a.ex2:hover,
a.ex2:active {
color: yellow;
}
a.ex3:hover,
a.ex3:active {
color: yellow;
}
a.ex4:hover,
a.ex4:active {
font-size: 200%;
color: yellow;
}
<h1 class="work1">
<center><a class="ex1">Photography Assignment</a></center>
</h1>
<div class="gallery">
<a target="_blank" href="images/SS1.png">
<img src="images/SS1.png" alt="Margaret's bag" height="200" width="300">
</a>
<div class="desc">An extreme close up of Margaret's bag</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS2.png">
<img src="images/SS2.png" alt="Margaret's notes" height="200" width="300">
</a>
<div class="desc">A picture of Margaret's bag</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS3.png">
<img src="images/SS3.png" alt="Close up of Margaret's face" height="200" width="300">
</a>
<div class="desc">A close up of Margaret against a pink house</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS4.png">
<img src="images/SS4.png" alt="A medium shot of Margaret" height="200" width="300">
</a>
<div class="desc">A medium shot of Margaret</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS5.png">
<img src="images/SS5.png" alt="A medium long shot of Margaret" height="200" width="300">
</a>
<div class="desc">A medium long shot of Margaret</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS6.png">
<img src="images/SS6.png" alt="A long shot of Margaret in motion" height="200" width="300">
</a>
<div class="desc">A long shot of Margaret in motion</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS7.png">
<img src="images/SS7.png" alt="A upward medium shot of Margaret" height="200" width="300">
</a>
<div class="desc">An upward medium shot of Margaret</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS8.png">
<img src="images/SS8.png" alt="A telephoto shot of a sunflower with Margaret in the background" height="200" width="300">
</a>
<div class="desc">A telephoto shot of a sunflower with Margaret in the background</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS9.png">
<img src="images/SS9.png" alt="A telephoto shot of Margaret" height="200" width="300">
</a>
<div class="desc">A telephoto shot of Margaret</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS10.png">
<img src="images/SS10.png" alt="A wide shot of Margaret getting into a firetruck" height="200" width="300">
</a>
<div class="desc">A wide shot of Margaret</div>
</div>
<br>
<h1>
<center><a class="ex1">Poster Assignment</a></center>
</h1>