Solved

div vertical centering

Posted on 2013-01-31
7
221 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
  • 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 53

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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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 53

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

863 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now