Jump to content


Photo
- - - - -

Vertical Align Page Canvas?


  • Please log in to reply
11 replies to this topic

#1 jennajonesdesign

jennajonesdesign

    Super Member

  • Members

  • 131 posts
  • LocationBillings, MT
  • Country: Country Flag

Posted 20 May 2012 - 05:25 PM

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!

#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 20 May 2012 - 05:33 PM

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.

#3 jennajonesdesign

jennajonesdesign

    Super Member

  • Members

  • 131 posts
  • LocationBillings, MT
  • Country: Country Flag

Posted 20 May 2012 - 05:37 PM

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

#4 jennajonesdesign

jennajonesdesign

    Super Member

  • Members

  • 131 posts
  • LocationBillings, MT
  • Country: Country Flag

Posted 20 May 2012 - 05:39 PM

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

#5 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 20 May 2012 - 05:40 PM

Try this instead:

Please Login or Register to see this Hidden Content



#6 jennajonesdesign

jennajonesdesign

    Super Member

  • Members

  • 131 posts
  • LocationBillings, MT
  • Country: Country Flag

Posted 20 May 2012 - 05:51 PM

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

#7 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 20 May 2012 - 05:57 PM

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.

#8 jennajonesdesign

jennajonesdesign

    Super Member

  • Members

  • 131 posts
  • LocationBillings, MT
  • Country: Country Flag

Posted 20 May 2012 - 06:21 PM

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

#9 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 20 May 2012 - 09:26 PM

Great. We hope it works!

#10 jennajonesdesign

jennajonesdesign

    Super Member

  • Members

  • 131 posts
  • LocationBillings, MT
  • Country: Country Flag

Posted 26 May 2012 - 03:34 AM

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

#11 Shane Holloman

Shane Holloman

    Member

  • Members

  • 19 posts
  • LocationAustin, TX
  • Framework Version:2.4.4 Pro
  • Country: Country Flag

Posted 13 August 2013 - 03:05 AM

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 @

Please Login or Register to see this Hidden Content

wants and a lot of us have been asking. 

Please Login or Register to see this Hidden Content

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



#12 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 13 August 2013 - 05:07 PM

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.