Solved

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

Posted on 2012-04-05
1
1,086 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
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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Suggested Solutions

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

809 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