7
Contributors
8
Replies
9
Views
7 Years
Discussion Span
Last Post by MJ Pieterse
0

Use auto margin to center the div tag.

div {
     margin: 0 auto;
     width: 650px;
   }

I have no idea to stay exactly center at vertical alignment. Note that auto margin need static width.

1

So let me get this straight.

You have a container that is liquid (so basically window), and you would like to center a div, 650px by 450px. Horizonal is easy,

margin: 0 auto

Getting it vertically, we would have to go jquery

Here is a link from stackoverflow

0

Typically the way I center my layers is to make them relatively positioned and place them inside a table.

<html>
<head>
<style type="text/css">
.layer1 {
z-index: 1;
position: relative;
width: 500px;
height: 600px;
background-color: #000000;
}
</style>
</head>

<body>
<table align="center" width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td align="center">
<div class="layer1"></div>
</td></tr></table>
</body>
</html>

Simply put a table that equals the whole size of the page and make the layer relative so the table can center it. Remember a div layer that is relatively positioned is relatively located to where you originally start it. Being centered in the middle of the table thats where it starts.

For a working reference check my website mastersofzi.110mb.com and look at the code. I put my primary layer in a table and relatively position it with all layers inside it absolutely positioned to the edge of the relative layer.

0

So let me get this straight.

You have a container that is liquid (so basically window), and you would like to center a div, 650px by 450px. Horizonal is easy,

margin: 0 auto

Getting it vertically, we would have to go jquery

Here is a link from stackoverflow

Using the JQuery worked well, though there is a new issue. If i resize the window the div stay centered to the proportions of the window when it first loaded, so the liquid part i wanted is still missing. What can i do to fix it?

<html>
<head>
    <title>Test</title>
  <script src="js/jquery.js" type="text/javascript"></script>
  <script type="text/javascript">
jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
    this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
    return this;
}
</script>
<script type="text/javascript">
$(document).ready(function(){
   // Your code here
   $(".centerDiv").center();
 });
</script>
    <style type="text/css">
 body {margin:0px;}
 .centerDiv{height:450px;width:650px;background-color:#0099CC}
    </style>
  
</head>

<body>
<div class="centerDiv"></div>
</body>

</html>
0

You may consider the jquery ui framework. It has a few themes - you can create your own. The widgets are really good. I've only just started using it myself and am amazed at the results. Worth a look I think.

1

Ok not a problem, lets bind the center function to window resize (GOT TO LOVE JQUERY).

Lets give this a try:

$(document).ready(function(){
    // Your code here
    $(".centerDiv").center();
});

//If the User resizes the window, we will recenterdiv
$(window).bind("resize", recenterdiv);
function recenterdiv(e){
	$(".centerDiv").center();
}
Votes + Comments
Solved my issue!
0

i can't view the sample link, but i would suggest that you put the style coding on your container tag for the div to align it in the center. Don't use absolute as it will not work for the layout you are looking for.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.