Solved

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

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

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

724 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