Jump to content

How Do You Center Code Blocks?

Recommended Posts

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?

codeblocksnotcentered.png

rightbuttons.png

Link to comment
  • Replies 5
  • Views 1.6k
  • Created
  • Last Reply
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?

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.