Jump to content
Sign in to follow this  
jennajonesdesign

Vertical Align Page Canvas?

Recommended Posts

jennajonesdesign+    15
jennajonesdesign

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
catrina
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
jennajonesdesign
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
jennajonesdesign
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
catrina
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
jennajonesdesign
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
catrina
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
jennajonesdesign
Thanks. I will try this out and post an update.

Share this post


Link to post
Share on other sites
Rob    547
Rob
Great. We hope it works!

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
jennajonesdesign+    15
jennajonesdesign
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
Shane Holloman

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
Rob

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

Sign in to follow this  

×