Solved

div vertical centering

Posted on 2013-01-31
7
226 Views
Last Modified: 2013-02-01
How can I set the following pageContainer to be vertically centered both on normal screen and fullscreen(F11) ?

<head>
<style>
.pageContainer{
border-style:solid;
border-width:1px;
border-radius: 10px;
width: 963;
height: 800px;
margin: 0px auto;
background-color:#efefef;
padding:0px;
text-align: center;
}
</style>
</head>
<body bgcolor="#999999">
<div class="pageContainer">
</div>
</body>
</html>

Open in new window

0
Comment
Question by:yaron89
[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
  • 2
  • 2
  • 2
  • +1
7 Comments
 
LVL 11

Accepted Solution

by:
mcnute earned 500 total points
ID: 38840371
try this:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.js"></script>
<style>
#pageContainer{
border-style:solid;
border-width:1px;
border-radius: 10px;
width: 963px;
height: 400px;
margin: 0px auto;
background-color:#efefef;
padding:0px;
text-align: center;
position:relative;
}
</style>

</head>
<body bgcolor="#999999">
<div id="pageContainer">
</div>
<script>
function initialize() {
   var divH = $('#pageContainer').innerHeight() / 2;
   var pageH = $(window).innerHeight() / 2;
   console.log(divH+'-'+pageH);
   $('#pageContainer').css({'top': pageH-divH});
}

initialize();

$(window).on('resize',function(){
  initialize();
});
    
</script>
</body>
</html>

Open in new window

0
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 38840412
How about something like this
<!doctype html>
<html>
<head>
<style>
.outerContainer {
	padding-top: 25%;
}
.pageContainer{
border-style:solid;
border-width:1px;
border-radius: 10px;
width: 963px;
height: 800px;
margin: -400px auto 0 auto;
background-color:#efefef;
padding:0px;
text-align: center;
}
</style>
</head>
<body bgcolor="#999999">
<div class="outerContainer">
	<div class="pageContainer">
	</div>
</div>
</body>
</html>

Open in new window

0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 38840446
With either of the solutions above, you'll also need to set your body element to 100% width and height. I usually do the same the for html element for good measure.
html, body { width: 100%; height: 100%; }

Open in new window

0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:yaron89
ID: 38840504
mcnute solution work. I prefer it was javascript.
0
 
LVL 11

Expert Comment

by:mcnute
ID: 38840513
YEAH!!!!
0
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 38840605
Why use jscript when you can do it with CSS - cannot see the logic in that at all?
0
 

Author Comment

by:yaron89
ID: 38840628
I tested your answer and it didn't work for me nor in normal screen and not in fullscreen mode.
0

Featured Post

Technology Partners: 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

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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 …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses

630 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