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

How to Center a Block

Question

Anytime I add a block to a page, it defaults to a flush left position. For example, if I want to have the Search Block appear right in the middle of a page, I need to add a Space Block to the left of it and stretch it out to the right until the Search Block becomes visually centered to my eye. Same with an image. If inserting an Image Block, I would need to add a Space Block on both the left and right of it in order to force it to center.

Are adding all of these spacer blocks the only way to force things to center? What about the Search Block where the Space Block is only on the left of it (to push it further right). Seems like there should be a more precise and elegant way to get this to be centered. All of these Space Blocks also effect the mobile version's layout.

Edited by deardorff

Share this post


Link to post

5 answers to this question

Recommended Posts

  • 4

You could use some custom CSS to reposition (center) a block on a page. If you were to have a search box with no blocks on either side, you could left align it in the layout engine, but then do something like this to center it:


#block-27cdfcdfb02ef08fdfc1 {
 position: relative;
 background: pink;
 width: 25%;
 left: 38%;
}



Share this post


Link to post
  • 0

Thank you so much for your response kale! I've seen your name many times around here and you contribute so much. My question now, how/where do I use custom CSS? This is something I have not yet figured out with there being so many places to enter code.

Share this post


Link to post
  • 0

You add the code to your custom CSS section, which is described here: http://help.squarespace.com/customer/portal/articles/438114-making-style-changes

However, you will need to identify your block ID, as the one I used above is just a random string of text. You get the ID by using the 'Inspect Element' found in Safari or Chrome, or by using Firebug extension for Firefox. It can be a bit tricky finding the block and id, but once you get the hang of it, identifying all of the various elements becomes quite easy.

Edit: If you have a particular block on a particular page you want to center, and are willing to post the link to the page, I can get / provide the ID for you.

Edited by kale

Share this post


Link to post
  • 0

I just want to add this solution for anyone who wants to center two or more blocks:

For the left block, set the left margin to auto. For the right block, set the right. Like this:


#leftBlock {
   margin-left: auto;
}

#rightBlock {
   margin-right: auto;
}

This puts them back to back in the center of the screen.To add space in between the blocks, set the other margin to some defined amount:


#leftBlock {
   margin-left: auto;
   margin-right: 5px;
}

#rightBlock {
   margin-right: auto;
   margin-left: 5px;
}

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...