Centering Div in the middle of the page
Question
Okay I wrapped the divs within a div. Why does this not work?
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>test.html</title>
<style type="text/css">
.wrapper
{
margin: 0px auto;
}
.testimonials_png
{
position: absolute;
left:20px;
top:397px;
width:220px;
height:395px;
background: url("test_files/testimonials.png") no-repeat;
}
.homeLink_png
{
position: absolute;
left:-1px;
top:243px;
width:203px;
height:75px;
background: url("test_files/homeLink.png") no-repeat;
}
.sidingLink_png
{
position: absolute;
left:202px;
top:243px;
width:180px;
height:75px;
background: url("test_files/sidingLink.png") no-repeat;
}
.windowsLink_png
{
position: absolute;
left:382px;
top:243px;
width:181px;
height:75px;
background: url("test_files/windowsLink.png") no-repeat;
}
.roofingLink_png
{
position: absolute;
left:563px;
top:243px;
width:183px;
height:75px;
background: url("test_files/roofingLink.png") no-repeat;
}
.aboutLink_png
{
position: absolute;
left:746px;
top:243px;
width:205px;
height:75px;
background: url("test_files/aboutLink.png") no-repeat;
}
.banner_png
{
position: absolute;
left:0px;
top:0px;
width:950px;
height:243px;
background: url("test_files/banner.png") no-repeat;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="testimonials_png"> </div>
<div class="homeLink_png"> </div>
<div class="sidingLink_png"> </div>
<div class="windowsLink_png"> </div>
<div class="roofingLink_png"> </div>
<div class="aboutLink_png"> </div>
<div class="banner_png"> </div>
</div>
</body>
</html>
2 answers
solution1
3 ACCPTED 2010-05-30 04:10:14
For the browser be able to correcty center a div, you must give it some info about that div, so:
.wrapper
{
margin: auto;
}
(copied from your code) it's wrong, but:
.wrapper
{
width:900px;
margin:0 auto;
}
Works just fine! your telling the browser that your wrapper as 900px of width and the rest the browser should split equally by the wrapper left and right side... Thus margin:auto; will provide you with nothing... needs the unit spec (for centering, use 0).
Another problem in your code is the fact that you have the content of wrapper with position absolute, and that will be rendered by the browser as elements outside your wrapper.. so, it's just like if your wrapper isn't there, so:
.wrapper
{
postion:absolute;
top:0;
left:50%;
width:900px;
margin-left:-450px;
}
This will the the browser that the wrapper is to by in an absolute position, that it is 0units from the top, and 50% of the browser's window from the left... to center it, just pull it back half of the given width, thus -450px of margin-left.
Now, your content should be set to position:relative; to be relatively positioned regarding the wrapper's position...
OK, here is your code (tested):
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>test.html</title>
<style type="text/css">
.wrapper
{
position:absolute;
left:50%;
width:950px;
margin-left:-475px;
}
.testimonials_png
{
position: absolute;
left:20px;
top:397px;
width:220px;
height:395px;
background:green url("test_files/testimonials.png") no-repeat;
}
.homeLink_png
{
position: absolute;
left:-1px;
top:243px;
width:203px;
height:75px;
background:purple url("test_files/homeLink.png") no-repeat;
}
.sidingLink_png
{
position: absolute;
left:202px;
top:243px;
width:180px;
height:75px;
background:orange url("test_files/sidingLink.png") no-repeat;
}
.windowsLink_png
{
position: absolute;
left:382px;
top:243px;
width:181px;
height:75px;
background:yellow url("test_files/windowsLink.png") no-repeat;
}
.roofingLink_png
{
position: absolute;
left:563px;
top:243px;
width:183px;
height:75px;
background:blue url("test_files/roofingLink.png") no-repeat;
}
.aboutLink_png
{
position: absolute;
left:746px;
top:243px;
width:205px;
height:75px;
background:red url("test_files/aboutLink.png") no-repeat;
}
.banner_png
{
position: absolute;
left:0px;
top:0px;
width:950px;
height:243px;
background:pink url("test_files/banner.png") no-repeat;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="testimonials_png"> </div>
<div class="homeLink_png"> </div>
<div class="sidingLink_png"> </div>
<div class="windowsLink_png"> </div>
<div class="roofingLink_png"> </div>
<div class="aboutLink_png"> </div>
<div class="banner_png"> </div>
</div>
</body>
</html>
solution2
1 2010-05-30 03:54:03
The best way to center a div IMO is to to create a main div named wrapper and in css assign a margin: 0 auto; to that element.
Thus all content will be equally centered from top,left,right,bottom etc
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.