jennajonesdesign+ 15 Report post Posted May 20, 2012 Hi! I saw another post about this, but doesn't look like he found a solution. I am working on a portfolio website. It looks great on a smaller screen, but on a bigger screen everything is way up at the top. I would like it to vertically center the page canvas the same way it is horizontally centered. Is this possible? I have tried applying this: vertical-align: middle; with no effect. One more thing to add to this. Do I have to have a fixed canvas height for this to work? Thanks so much for your insight! Share this post Link to post Share on other sites
catrina 103 Report post Posted May 20, 2012 What CSS selector are you adding the vertical-align attribute to? I don't think you have to have a fixed canvas height for this since layers that use the attribute don't usually have a fixed height. Please read the docs before posting. Please do not private message me unless I ask you to. Designer | Catrina Dulay Founder | Catrina and Mouse Share this post Link to post Share on other sites jennajonesdesign+ 15 Report post Posted May 20, 2012 Here is the code I have for that section: #page-canvas { background:white; vertical-align: middle; } Share this post Link to post Share on other sites jennajonesdesign+ 15 Report post Posted May 20, 2012 I also tried it here: .canvas #page-canvas Sorry - I am not a css master. I just do a lot of trial and error. I appreciate your help. Jenna Share this post Link to post Share on other sites catrina 103 Report post Posted May 20, 2012 Try this instead: [code]#page-canvas { position: absolute; top: 50%;}[/code] Please read the docs before posting. Please do not private message me unless I ask you to. Designer | Catrina Dulay Founder | Catrina and Mouse Share this post Link to post Share on other sites jennajonesdesign+ 15 Report post Posted May 20, 2012 Just tried that. You can check out the link. It just added a huge margin at the top, but not centered. Share this post Link to post Share on other sites catrina 103 Report post Posted May 20, 2012 I looked around and found this list of methods for vertical centering with CSS: http://www.vanseodesign.com/css/vertical-centering. You can try applying some of these methods to the layout to see which one works best. Please read the docs before posting. Please do not private message me unless I ask you to. Designer | Catrina Dulay Founder | Catrina and Mouse Share this post Link to post Share on other sites jennajonesdesign+ 15 Report post Posted May 20, 2012 Thanks. I will try this out and post an update. Share this post Link to post Share on other sites Rob 547 Report post Posted May 20, 2012 Great. We hope it works! Former PageLines Moderator, Food Expert and Raconteur Share this post Link to post Share on other sites jennajonesdesign+ 15 Report post Posted May 26, 2012 Couldn't figure out exactly what I was hoping for. Just added a footer instead and that seemed to add more vertical balance. Share this post Link to post Share on other sites Shane Holloman 1 Report post Posted August 13, 2013 Ive had the same questions - the problem is no seems to really know how to do this.... We can never get a straight answer from anyone - it's always a reference to another page with a person doing this on an entirely different setup, theme, software etc here's what jennajonesdesign wants and a lot of us have been asking. http://www.codingjack.com/jackbox/ <- We want that result - We are asking explicitly what the code is and where to place to render this result on a clean (no additional sections added - content or a content box only) pagelines landing page? Does anyone have the straight dope on this?? Shane Holloman IT Specialist | Digital Artist | Web Developer http://unitedsaints.com +1(424) 218-6853 Share this post Link to post Share on other sites Rob 547 Report post Posted August 13, 2013 Shane, this topic is more than a year old and is not the same as your issue, rest assured. It may seem the same, but you'd be best to open a new topic rather than tagging onto to any outdated topics. Former PageLines Moderator, Food Expert and Raconteur Share this post Link to post Share on other sites Create an account or sign in to comment You need to be a member in order to leave a comment Create an account Sign up for a new account in our community. It's easy! Register a new account Sign in Already have an account? Sign in here. Sign In Now Login via PageLines Signup To PageLines Sign in to follow this Followers 0
jennajonesdesign+ 15 Report post Posted May 20, 2012 Here is the code I have for that section: #page-canvas { background:white; vertical-align: middle; } Share this post Link to post Share on other sites
jennajonesdesign+ 15 Report post Posted May 20, 2012 I also tried it here: .canvas #page-canvas Sorry - I am not a css master. I just do a lot of trial and error. I appreciate your help. Jenna Share this post Link to post Share on other sites
catrina 103 Report post Posted May 20, 2012 Try this instead: [code]#page-canvas { position: absolute; top: 50%;}[/code] Please read the docs before posting. Please do not private message me unless I ask you to. Designer | Catrina Dulay Founder | Catrina and Mouse Share this post Link to post Share on other sites
jennajonesdesign+ 15 Report post Posted May 20, 2012 Just tried that. You can check out the link. It just added a huge margin at the top, but not centered. Share this post Link to post Share on other sites
catrina 103 Report post Posted May 20, 2012 I looked around and found this list of methods for vertical centering with CSS: http://www.vanseodesign.com/css/vertical-centering. You can try applying some of these methods to the layout to see which one works best. Please read the docs before posting. Please do not private message me unless I ask you to. Designer | Catrina Dulay Founder | Catrina and Mouse Share this post Link to post Share on other sites
jennajonesdesign+ 15 Report post Posted May 20, 2012 Thanks. I will try this out and post an update. Share this post Link to post Share on other sites
Rob 547 Report post Posted May 20, 2012 Great. We hope it works! Former PageLines Moderator, Food Expert and Raconteur Share this post Link to post Share on other sites
jennajonesdesign+ 15 Report post Posted May 26, 2012 Couldn't figure out exactly what I was hoping for. Just added a footer instead and that seemed to add more vertical balance. Share this post Link to post Share on other sites
Shane Holloman 1 Report post Posted August 13, 2013 Ive had the same questions - the problem is no seems to really know how to do this.... We can never get a straight answer from anyone - it's always a reference to another page with a person doing this on an entirely different setup, theme, software etc here's what jennajonesdesign wants and a lot of us have been asking. http://www.codingjack.com/jackbox/ <- We want that result - We are asking explicitly what the code is and where to place to render this result on a clean (no additional sections added - content or a content box only) pagelines landing page? Does anyone have the straight dope on this?? Shane Holloman IT Specialist | Digital Artist | Web Developer http://unitedsaints.com +1(424) 218-6853 Share this post Link to post Share on other sites
Rob 547 Report post Posted August 13, 2013 Shane, this topic is more than a year old and is not the same as your issue, rest assured. It may seem the same, but you'd be best to open a new topic rather than tagging onto to any outdated topics. Former PageLines Moderator, Food Expert and Raconteur Share this post Link to post Share on other sites