Guest Posted July 9, 2013 Share Posted July 9, 2013 (edited) 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 July 9, 2013 by Guest Link to comment
kale Posted July 9, 2013 Share Posted July 9, 2013 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%; } Link to comment
Guest Posted July 25, 2013 Share Posted July 25, 2013 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. Link to comment
kale Posted July 25, 2013 Share Posted July 25, 2013 (edited) 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 July 25, 2013 by kale Link to comment
corpico Posted July 7, 2015 Share Posted July 7, 2015 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; } Link to comment
Janelle44 Posted November 8, 2019 Share Posted November 8, 2019 How do I enter custom CSS that automatically aligns all video / gallery / content blocks center? Link to comment
Mania Posted February 18, 2021 Share Posted February 18, 2021 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? Link to comment
tuanphan Posted February 19, 2021 Share Posted February 19, 2021 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment