Solved

JQuery Mobile: Use CSS to vertically center a DIV on the page

Posted on 2012-04-05
1
1,110 Views
Last Modified: 2012-05-29
I have a homepage that is set to scale based on the device size.  I have set the header and footers to be fixed to the top/bottom of the page.  I have a DIV in the center with menu buttons on it.

I would like the DIV to be vertically centered based on the size of the page when rendered. I found a few solutions on here and the best one so far works but it seems to horizontally center it also which I cant figure out how to disable.

This is the solution I am referring to.... http://www.experts-exchange.com/viewCodeSnippet.jsp?codeSnippetId=8131290
0
Comment
Question by:MLeehersh
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
1 Comment
 
LVL 42

Accepted Solution

by:
David S. earned 500 total points
ID: 37815358
This code is setting both the horizontal and vertical margins to 20%:
.vertical {height:300px;width:500px;margin:20%;border:solid 1px green; background:#ffc;}

Open in new window

To only set the vertical margins, do this:
.vertical {height:300px;width:500px;margin:20% 0;border:solid 1px green; background:#ffc;}

Open in new window

0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

730 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question