How Do You Center Code Blocks?

I had several images that were identical on my page, same size and shape. However I wanted them to be buttons that changed color upon hover. so i made them into code blocks and attached this code to them:
 

<a href="/web-load-tracking">
<img src="https://static1.squarespace.com/static/5dcf22cb93b61d33686b863a/t/5dd5efa58bcf197a9a45df2d/1574301606049/2button.png" 
onmouseover="this.src='https://static1.squarespace.com/static/5dcf22cb93b61d33686b863a/t/5dd5efab8bcf197a9a45df8f/1574301611566/2hover.png'" 
onmouseout="this.src='https://static1.squarespace.com/static/5dcf22cb93b61d33686b863a/t/5dd5efa58bcf197a9a45df2d/1574301606049/2button.png'">
</a>

But now their spacing is all messed up. how do i center the blocks so that they look like the second screenshot i am attaching?

Hi @PMDesigner - I would add PNG images with transparent background with the icons and buttons in white only. Then add a red background to the static images with CSS and a hover effect changing the color. That's super simple to achieve. If you need further help, please share a link to your website and password.

39 minutes ago, lu.diehl said:

Hi @PMDesigner - I would add PNG images with transparent background with the icons and buttons in white only. Then add a red background to the static images with CSS and a hover effect changing the color. That's super simple to achieve. If you need further help, please share a link to your website and password.

Hey thats an idea. I might just do that if I cannot find a way to center a code block image. Thanks.

@tuanphan do you know of a way to do this with images in the code blocks?

Just now, PMDesigner said:

Hey thats an idea. I might just do that if I cannot find a way to center a code block image. Thanks.

@tuanphan do you know of a way to do this with images in the code blocks?

linkkkkkkkkk to your siteeeeeeeee

On 11/22/2019 at 11:52 AM, tuanphan said:

linkkkkkkkkk to your siteeeeeeeee

https://grasshopper-rose-xsw2.squarespace.com/products
password is addonsystems

Alright thanks for the suggestion @lu.diehl
I put this code in the block:
 

<img src="paris.jpg" alt="Paris" class="center">

and put this code into the CSS
 

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

This centered the code block image.