Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2012-04-05
1
Medium Priority
?
1,169 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 43

Accepted Solution

by:
David S. earned 2000 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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

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…
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

636 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