这是我在Stack Overflow上的第一个问题，但我已经从这个很棒的网站上学到了我所知道的一切，所以我希望你能提供帮助。。。。
我有一个非常简单的主页，它只是拒绝居中对齐。它基本上只是背景图像和奇怪的文本，中间有一个Wow Slider图像滑块（免费版本）。我尝试过在容器div（table_01）、主体、单独的容器div（现在因沮丧而删除）和其他各种东西上将margin设置为0 auto。Div-align：中心不起作用，我一直在旋转，直到我的手指流血，但没有成功。整个页面的html如下所示：
<!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>
<title>house</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="homestyle.css"/>
<link href="http://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet" type="text/css" />
<!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="engine1/style.css" media="screen" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
</head>
<body>
<div id="Table_01">
<div id="home-01_">
<img id="home_01" src="images/home_01.png" width="255" height="194" alt="" />
</div>
<div id="home-02_">
<p> Your qualifications and whatnots can go in here, or if you'd prefer I can put a tagline like "All aspects of construction and landscaping tackled"....</p>
</div>
<div id="commentbar">
<p class="comslide">Scrolling comments will go here (they scroll every twenty seconds so that customers can see how great your buildings are....)</p> </div>
<div id="home-04_" class="topbar">
<a href="CHANGE THIS TO HOME LINK">Home</a></div>
<div id="home-05_" class="topbar">
<a href="CHANGE THIS TO SERVCIES LINK">Services</a>
</div>
<div id="home-06_">
<img id="home_06" src="images/home_06.png" width="2" height="70" alt="" />
</div>
<div id="home-07_" class="topbar">
<a href="CHANGE THIS TO GALLERY LINK">Gallery</a>
</div>
<div id="home-08_">
<img id="home_08" src="images/home_08.png" width="1" height="70" alt="" />
</div>
<div id="home-09_" class="topbar">
<a href="CHANGE THIS TO CONTACT LINK">Contact</a>
</div>
<div id="home-10_">
<img id="home_10" src="images/home_10.png" width="2" height="726" alt="" />
</div>
<div id="home-11_">
<img id="home_11" src="images/home_11.png" width="551" height="28" alt="" />
</div>
<div id="home-12_">
<img id="home_12" src="images/home_12.png" width="239" height="28" alt="" />
</div>
<div id="home-13_">
<img id="home_13" src="images/home_13.png" width="225" height="28" alt="" />
</div>
<div id="home-14_">
<img id="home_14" src="images/home_14.png" width="168" height="76" alt="" />
</div>
<div id="home-15_"><!-- Start WOWSlider.com BODY section id=wowslider-container1 -->
<div id="wowslider-container1">
<div class="ws_images"><ul>
<li><img src="data1/images/raised_bed.jpg" alt="raised bed" title="raised bed" id="wows1_0"/></li>
<li><img src="data1/images/steps.jpg" alt="steps" title="steps" id="wows1_1"/></li>
<li><img src="data1/images/fence.jpg" alt="fence" title="fence" id="wows1_2"/></li>
<li><img src="data1/images/extension.jpg" alt="extension" title="extension" id="wows1_3"/></li>
<li><img src="data1/images/garden_wall.jpg" alt="garden_wall" title="garden_wall" id="wows1_4"/></li>
<li><img src="data1/images/wall.jpg" alt="wall" title="wall" id="wows1_5"/></li>
</ul></div>
<div class="ws_bullets"><div>
<a href="#" title="Raised Bed"><img src="data1/tooltips/raised_bed.jpg" alt="Raised Bed"/>1</a>
<a href="#" title="Steps and Paving"><img src="data1/tooltips/steps.jpg" alt="steps"/>2</a>
<a href="#" title="Fencing"><img src="data1/tooltips/fence.jpg" alt="fence"/>3</a>
<a href="#" title="Extensions"><img src="data1/tooltips/extension.jpg" alt="extension"/>4</a>
<a href="#" title="Garden walls"><img src="data1/tooltips/garden_wall.jpg" alt="garden_wall"/>5</a>
<a href="#" title="and all forms of Bricklaying"><img src="data1/tooltips/wall.jpg" alt="wall"/>6</a>
</div></div>
</div>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<!-- End WOWSlider.com BODY section --></div>
<div id="home-16_">
<img id="home_16" src="images/home_16.png" width="168" height="76" alt="" />
</div>
<div id="home-17_">
<img id="home_17" src="images/home_17.png" width="57" height="580" alt="" />
</div>
<div id="home-18_">
<img id="home_18" src="images/home_18.png" width="56" height="57" alt="" />
</div>
<div id="home-19_">
<img id="home_19" src="images/home_19.png" width="55" height="184" alt="" />
</div>
<div id="home-20_">
<img id="home_20" src="images/home_20.png" width="54" height="184" alt="" />
</div>
<div id="home-21_">
<img id="home_21" src="images/home_21.png" width="60" height="57" alt="" />
</div>
<div id="home-22_">
<img id="home_22" src="images/home_22.png" width="54" height="580" alt="" />
</div>
<div id="home-23_">
<img id="home_23" src="images/home_23.png" width="56" height="127" alt="" />
</div>
<div id="home-24_">
<img id="home_24" src="images/home_24.png" width="60" height="127" alt="" />
</div>
<div id="home-25_">
<img id="home_25" src="images/home_25.png" width="682" height="47" alt="" />
</div>
<div id="home-26_">
<img id="home_26" src="images/home_26.png" width="28" height="396" alt="" />
</div>
<div id="home-27_"><p>This box will contain an "add a comment" thing. Every time someone adds a comment you will get an email asking you if you want it to appear on the top bit of the page.</p></div>
<div id="home-28_">
<img id="home_28" src="images/home_28.png" width="184" height="220" alt="" />
</div>
<div id="home-29_"><p> And this one is your basic "About me" box. Please write up a basic description of who you are and the services you offer so that I can stick it in here. For the record, the two little trucks link to your facebook and twitter accounts (I'll make you an LRC account for both) and if users click the envelope in the middle then their mail program will pop up with your email adress already in the send to box. There's a white outline on them atm but that'll be gone as soon as my photoshop works properly again.</p> </div>
<div id="home-30_">
<img id="home_30" src="images/home_30.png" width="29" height="296" alt="" />
</div>
<div id="home-31_">
<img id="home_31" src="images/home_31.png" width="298" height="211" alt="" />
</div>
<div id="home-32_">
<img id="home_32" src="images/home_32.png" width="42" height="176" alt="" />
</div>
<div id="home-33_">
<a href="mailto:">
<img id="mail" src="images/Email.png" width="145" height="158" alt="Click to email" /></a>
</div>
<div id="home-34_">
<img id="home_34" src="images/home_34.png" width="365" height="35" alt="" />
</div>
<div id="home-35_">
<img id="home_35" src="images/home_35.png" width="365" height="41" alt="" />
</div>
<div id="home-36_">
<img id="home_36" src="images/home_36.png" width="110" height="100" alt="" />
</div>
<div id="home-37_">
<a href="CHANGE THIS TO FB ADDRESS" target="blank">
<img src="images/truck_37.png" width="109" height="73" alt="" /></a>
</div>
<div id="home-38_">
<img id="home_38" src="images/home_38.png" width="59" height="100" alt="" />
</div>
<div id="home-39_">
<a href="CHANGE THIS TO FB ADDRESS" target="blank">
<img src="images/truck_39.png" alt="" />
</a>
</div>
<div id="home-40_">
<img id="home_40" src="images/home_40.png" width="116" height="29" alt="" />
</div>
<div id="home-41_">
<img id="home_41" src="images/home_41.png" width="109" height="27" alt="" />
</div>
<div id="home-42_">
<img id="home_42" src="images/home_42.png" width="145" height="18" alt="" />
</div>
</div id="Table_01">
<!-- End Save for Web Slices -->
</body>
</html>
样式表如下：
@charset "utf-8";
/* CSS Document */
body {
font-family: 'Roboto Condensed', sans-serif;
}
a:link {
color:#db6748;
text-decoration:none;
font-size:18px
font-family: 'Roboto Condensed', sans-serif;
}
a:visited {
color:#8f3821;
}
#Table_01 {
position:absolute;
left:0px;
top:0px;
bottom:0px;
width:1020px;
height:920px;
z-index:1;
margin:0 auto;
padding:0;
text-align:center;
}
#home-01_ {
position:absolute;
left:0px;
top:0px;
width:255px;
height:194px;
}
#home-02_ {
position:absolute;
left:255px;
top:0px;
width:765px;
height:99px;
background-image:url(images/home_02.png);
}
#commentbar {
position:absolute;
left:255px;
top:99px;
width:765px;
height:95px;
border-top:dotted;
border-color:#666;
background-image:url(images/home_03.png);
}
#home-04_ {
position:absolute;
left:0px;
top:194px;
width:269px;
height:42px;
background-image:url(images/home_04.png);
}
.topbar {
font-size:24px;
border-top:dotted;
border-color:#333;
}
.comslide{
position:absolute;
vertical-align:middle;;
color:#CCC;
}
.topbar a:link {color:#d5d5d5;}
.topbar a:hover { color:#999;}
#home-05_ {
position:absolute;
left:269px;
top:194px;
width:282px;
height:42px;
background-image:url(images/home_05.png);
}
#home-06_ {
position:absolute;
left:551px;
top:194px;
width:2px;
height:70px;
}
#home-07_ {
position:absolute;
left:553px;
top:194px;
width:239px;
height:42px;
background-image:url(images/home_07.png)
}
#home-08_ {
position:absolute;
left:792px;
top:194px;
width:1px;
height:70px;
}
#home-09_ {
position:absolute;
left:793px;
top:194px;
width:225px;
height:42px;
background-image:url(images/home_09.png)
}
#home-10_ {
position:absolute;
left:1018px;
top:194px;
width:2px;
height:726px;
}
#home-11_ {
position:absolute;
left:0px;
top:236px;
width:551px;
height:28px;
}
#home-12_ {
position:absolute;
left:553px;
top:236px;
width:239px;
height:28px;
}
#home-13_ {
position:absolute;
left:793px;
top:236px;
width:225px;
height:28px;
}
#home-14_ {
position:absolute;
left:0px;
top:264px;
width:168px;
height:76px;
}
#home-15_ {
position:absolute;
left:168px;
top:264px;
width:682px;
height:213px;
z-index:1;
background-image:url(images/home_15.png);
}
#home-16_ {
position:absolute;
left:850px;
top:264px;
width:168px;
height:76px;
}
#home-17_ {
position:absolute;
left:0px;
top:340px;
width:57px;
height:580px;
}
#home-18_ {
position:absolute;
left:57px;
top:340px;
width:56px;
height:57px;
}
#home-19_ {
position:absolute;
left:113px;
top:340px;
width:55px;
height:184px;
}
#home-20_ {
position:absolute;
left:850px;
top:340px;
width:54px;
height:184px;
}
#home-21_ {
position:absolute;
left:904px;
top:340px;
width:60px;
height:57px;
}
#home-22_ {
position:absolute;
left:964px;
top:340px;
width:54px;
height:580px;
}
#home-23_ {
position:absolute;
left:57px;
top:397px;
width:56px;
height:127px;
}
#home-24_ {
position:absolute;
left:904px;
top:397px;
width:60px;
height:127px;
}
#home-25_ {
position:absolute;
left:168px;
top:477px;
width:682px;
height:47px;
}
#home-26_ {
position:absolute;
left:57px;
top:524px;
width:28px;
height:396px;
}
#home-27_ {
position:absolute;
left:85px;
top:524px;
width:298px;
height:185px;
background-image:url(images/home_27.png);
}
#home-28_ {
position:absolute;
left:383px;
top:524px;
width:184px;
height:220px;
}
#home-29_ {
position: absolute;
left: 568px;
top: 525px;
width: 368px;
height: 220px;
background-image:url(images/home_29.png);
}
#home-30_ {
position:absolute;
left:935px;
top:524px;
width:29px;
height:296px;
}
#home-31_ {
position:absolute;
left:85px;
top:709px;
width:298px;
height:211px;
}
#home-32_ {
position:absolute;
left:383px;
top:744px;
width:42px;
height:176px;
}
#home-33_ {
position:absolute;
left:425px;
top:744px;
width:145px;
height:158px;
background-image:url(images/home_33.png)
}
#home-34_ {
position:absolute;
left:570px;
top:744px;
width:365px;
height:35px;
}
#home-35_ {
position:absolute;
left:570px;
top:779px;
width:365px;
height:41px;
}
#home-36_ {
position:absolute;
left:570px;
top:820px;
width:110px;
height:100px;
}
#home-37_ {
position:absolute;
left:680px;
top:820px;
width:109px;
height:73px;
background-image:url(images/home_37.png);
}
#home-38_ {
position:absolute;
left:789px;
top:820px;
width:59px;
height:100px;
}
#home-39_ {
position:absolute;
left:848px;
top:820px;
width:116px;
height:71px;
background-image:url(images/home_39.png);
}
#home-40_ {
position:absolute;
left:848px;
top:891px;
width:116px;
height:29px;
}
#home-41_ {
position:absolute;
left:680px;
top:893px;
width:109px;
height:27px;
}
#home-42_ {
position:absolute;
left:425px;
top:902px;
width:145px;
height:18px;
}
#higher {
position:absolute;
top: 0px;
width:682px;
height:213px;
}
#page-01_ {
position:absolute;
left:0px;
top:0px;
width:255px;
height:194px;
}
#page-02_ {
position:absolute;
left:255px;
top:0px;
width:765px;
height:99px;
}
#page-03_ {
position:absolute;
left:255px;
top:99px;
width:765px;
height:95px;
}
#page-04_ {
position:absolute;
left:0px;
top:194px;
width:269px;
height:42px;
}
#page-05_ {
position:absolute;
left:269px;
top:194px;
width:282px;
height:42px;
}
#page-06_ {
position:absolute;
left:551px;
top:194px;
width:2px;
height:75px;
}
#page-07_ {
position:absolute;
left:553px;
top:194px;
width:239px;
height:42px;
}
#page-08_ {
position:absolute;
left:792px;
top:194px;
width:1px;
height:75px;
}
#page-09_ {
position:absolute;
left:793px;
top:194px;
width:225px;
height:42px;
}
#page-10_ {
position:absolute;
left:1018px;
top:194px;
width:2px;
height:726px;
}
#page-11_ {
position:absolute;
left:0px;
top:236px;
width:551px;
height:33px;
}
#page-12_ {
position:absolute;
left:553px;
top:236px;
width:239px;
height:33px;
}
#page-13_ {
position:absolute;
left:793px;
top:236px;
width:225px;
height:33px;
}
#page-14_ {
position:absolute;
left:0px;
top:269px;
width:57px;
height:651px;
}
#page-15_ {
position:absolute;
left:57px;
top:269px;
width:907px;
height:455px;
}
#page-16_ {
position:absolute;
left:964px;
top:269px;
width:54px;
height:651px;
}
#page-17_ {
position:absolute;
left:57px;
top:724px;
width:907px;
height:20px;
}
#page-18_ {
position:absolute;
left:57px;
top:744px;
width:368px;
height:176px;
}
#Email_ {
position:absolute;
left:425px;
top:744px;
width:145px;
height:158px;
background-image:url(images/Emailbg.png);
}
#page-20_ {
position:absolute;
left:570px;
top:744px;
width:394px;
height:76px;
}
#page-21_ {
position:absolute;
left:570px;
top:820px;
width:110px;
height:100px;
}
#page-22_ {
position:absolute;
left:680px;
top:820px;
width:109px;
height:73px;
}
#page-23_ {
position:absolute;
left:789px;
top:820px;
width:59px;
height:100px;
}
#page-24_ {
position:absolute;
left:848px;
top:820px;
width:116px;
height:71px;
}
#page-25_ {
position:absolute;
left:848px;
top:891px;
width:116px;
height:29px;
}
#page-26_ {
position:absolute;
left:680px;
top:893px;
width:109px;
height:27px;
}
#page-27_ {
position:absolute;
left:425px;
top:902px;
width:145px;
height:18px;
}
另一个样式表只是设置滑块的格式——我试着取消它的链接，看看页面是否会居中对齐，但没有什么乐趣。有什么想法吗？如果你需要的话，我会添加其他样式表的代码
感谢
Nye
在JS Bin上进行演示。
以下规则需要更改：
#Table_01 {
position: relative;
width:1020px;
height:920px;
z-index:1;
margin:0 auto;
padding:0;
text-align:center;
}
您的#Table_01将永远不会居中，因为它的位置设置为0的左侧和顶部的绝对位置。删除这些值将是一个开始。。。
您需要删除每个position: absolute、left: *px和top:*px属性，然后调整#Table_01的width:。这是由某个生成器创建的吗？？这个代码看起来很难看。。。