Member Avatar for Argo54325

Hello, could someone tell me how i could position a div tag exactly in the center of the browser being liquid and the div tag size fixed to 650px by 450px.

here is an example as to what I'm looking for:

http://linuxfud.files.wordpress.com/2006/11/gdm-login.png

Edited by Argo54325 because: spelling mistake in title
  • 7 Contributors
  • 8 Replies
  • 118 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by MJ Pieterse

Recommended Answers

All 8 Replies

Member Avatar for qazplm114477

Hello, could someone tell me how i could position a div tag exactly in the center of the browser being liquid and the div tag size fixed to 650px by 450px.

here is an example as to what I'm looking for:

http://linuxfud.files.wordpress.com/2006/11/gdm-login.png

try

/*CSS*/

#div_id{position:absolute; top:0; left:0; width:100%; z-index:100;}
Member Avatar for ko ko

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.

Member Avatar for macneato

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

Member Avatar for Dragennd

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.

Member Avatar for Argo54325

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>
Member Avatar for diafol

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.

Member Avatar for macneato

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();
}
commented: Solved my issue! +2
Member Avatar for MJ Pieterse

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.