Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
PMDesigner

How Do You Center Code Blocks?

Question

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

Share this post


Link to post

5 answers to this question

Recommended Posts

  • 0

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.

Share this post


Link to post
  • 1

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.

Share this post


Link to post
  • 1
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


 Send me a message if you have any questions.

OFF forum from Jan 16 - Jan 31 for Lunar New Year.

Share this post


Link to post
  • 0
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?

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...