jQuery: Center div
Using jQuery (not plain CSS) how can I center a div in the middle of the window?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Box</title>
<style type="text/css">
#v1 {
position: absolute;
top: 50px;
z-index: 112;
margin: 0 auto 0 auto;
padding: 0;
width: 800px;
background: #fff;
border: 2px solid #111;
vertical-align: top;
}
#v1 * {
vertical-align: top;
padding: 0;
margin: 0;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert('I want to center the #v1 div');
});
</script>
</head>
<body>
<h1>Hello World</h1>
<h2>This is a test</h2>
<p>Blah blah blah.</p>
<div id="v1">
<p><img src="http://piccies.flybywire.org.uk/Gliding/2004/20040905/MeFinishing3.jpg"></p>
</p>
</div>
</body>
</html>
ASKER
tdot, your idea does NOT work because the position is absolute. Please test your idea before making another post, thanks.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Hanknight
have you given this a try yet..
have you given this a try yet..
$('div').css.( {
'width':' 700px ', //set to the width to div
'margin-left': 'auto',
'margin-right': 'auto'
});