Vertical Align Page Canvas?

[jennajonesdesign+ 15]

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!

[catrina 103]

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

[jennajonesdesign+ 15]

Here is the code I have for that section: #page-canvas { background:white; vertical-align: middle; }

[jennajonesdesign+ 15]

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

[catrina 103]

Try this instead: [code]#page-canvas { position: absolute; top: 50%;}[/code]

[jennajonesdesign+ 15]

Just tried that. You can check out the link. It just added a huge margin at the top, but not centered.

[catrina 103]

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.

[jennajonesdesign+ 15]

Thanks. I will try this out and post an update.

[Rob 547]

Great. We hope it works!

[jennajonesdesign+ 15]

Couldn't figure out exactly what I was hoping for. Just added a footer instead and that seemed to add more vertical balance.

[Shane Holloman 1]

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

[Rob 547]

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.