Need help aligning photos on my web pages

On my web pages for my images I've been using div class that aligned them left or right. I used this same thing throughout my website so if I can get a better solution I will transition that code change to the rest of the

I now want the images centered as the appear better on phones and tablets in holding in portrait and landscape.

I remove the div class but am having trouble getting them to a size that not too large, but want them good quality and want them centered.

On my home page at the bottom is an example of a bulldog with some text below it.

This is my home page:
https://www.mrhoni-photography.com

Here is the current html:

Here is the html I originally was using.:

Here is the div class myPhotoLinks:
.myPhotoLinks {
float: left;
padding-right: 20px;
style: 50%;
}

.myPhotoLinksRight {
float: right;
padding-left: 20px;
style: 50%;
}