How to Center a Block

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.

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%;
}

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.

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.

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;
}

How do I enter custom CSS that automatically aligns all video / gallery / content blocks center?

Any idea how to do the centering if it has to do with lowering the image? Making it go down, not more to the right or more to the left?

18 hours ago, Mania said:

Any idea how to do the centering if it has to do with lowering the image? Making it go down, not more to the right or more to the left?

can you share link to page where you have problem? We can check easier