• Some users have recently had their accounts hijacked. It seems that the now defunct EVGA forums might have compromised your password there and seems many are using the same PW here. We would suggest you UPDATE YOUR PASSWORD and TURN ON 2FA for your account here to further secure it. None of the compromised accounts had 2FA turned on.
    Once you have enabled 2FA, your account will be updated soon to show a badge, letting other members know that you use 2FA to protect your account. This should be beneficial for everyone that uses FSFT.

HTML div centering

N

NukeULater

Gawd
Joined
Sep 12, 2006
Messages
917
This is going to be a stupid question, but I am stumped as to how I might vertically and horizontally center the css box I have created. My website is in desperate need of an update, but I do not have much experience with css scripting.

Basically, I want the 955x600 pixel box to float in the center of the browser window and stay centered as the window is resized.

I greatly appreciate the help, as I am lost with any modern html code.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="---" content="---" />

<title>Test</title>
<link rel="stylesheet" type="text/css" href="mystyle.css" />

<style type="text/css">

#main_content {
    
    width: 955px;
    height: 600px;
    position:absolute;
    align:center;
    vertical-align: middle;
    margin-left: auto;
    margin-right: auto;
    top: 20%;
    left: 25%;
    background: #000000;
    margin: 0 auto; 
    border: 0px solid #000000;
    text-align: left; 
}


</style>

</head>

<body>
<div id="main_content">

  <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="955" height="600" id="intro" align="middle">
    <param name="allowScriptAccess" value="sameDomain" />
    <param name="allowFullScreen" value="false" />
    <param name="movie" value="intro.swf" />
    <param name="quality" value="high" />
    <param name="bgcolor" value="#000000" />
    <embed src="intro.swf" quality="high" bgcolor="#000000" width="955" height="600" name="intro" align="middle" allowscriptaccess="sameDomain" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />  
</object>

</div>

</body>
</html>
 
done this a few times.
1) download jquery
2) download ba-dotimeout jquery plugin thingie
3) add to your page
$(window).resize(function() {
$.doTimeout('resize',500, function(){
//do resizing
});
});

use jquery to check height/width to math and positon from there.
 
I am often lazy about that one and just make a <table> 100% width+height and align+valign center and just throw whatever I want inside of there and its centered :)
 
try this:

Code: 
#main_content {
    
    width: 955px;
    height: 600px;
    position:absolute;
    top: 50%;
    left: 50%;
    background: #000000;
    border: 0px solid #000000;
    margin-left:-477px;
    margin-top:-300px;
}
 
illdklli said:
try this:
Click to expand...

This worked perfectly! I didn't realize that I needed to change the margins to accommodate the left/top positioning. Thank you for all for the help. I will be back if I have any more questions, hopefully they will be a bit more complex. :D
 
NukeULater said:
This worked perfectly! I didn't realize that I needed to change the margins to accommodate the left/top positioning. Thank you for all for the help. I will be back if I have any more questions, hopefully they will be a bit more complex. :D
Click to expand...

sadly, it only works for a div of fixed height. You'll have to resort to some javascript trickery for divs of indeterminate height.
 
for left-right centering (for future purposes) you can get by with setting your left and right margins to auto. As long as the element has a fixed width that should be fine.
 
You must log in or register to reply here.
Back
Top