9 replies to this topic

[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!

[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.

• Back to top

[jennajonesdesign]

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

[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

[catrina]

Try this instead:

Please Login or Register to see this Hidden Content

[jennajonesdesign]

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

[catrina]

I looked around and found this list of methods for vertical centering with CSS:

Please Login or Register to see this Hidden Content

You can try applying some of these methods to the layout to see which one works best.

[jennajonesdesign]

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

[Rob]

Great. We hope it works!

[jennajonesdesign]

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