?
Solved

div vertical centering

Posted on 2013-01-31
7
Medium Priority
?
227 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 1500 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 59

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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

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 59

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

Industry Leaders: 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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
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.
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 …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

718 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