这是我关于Stack Overflow的第一个问题，但我已经从这个伟大的网站上学到了我所知道的一切，所以我希望你能帮助....
我有一个非常简单的主页，它只是拒绝居中对齐。它基本上只是背景图像和奇怪的文本，中间有一个Wow Slider图像滑块（免费版）。我已经尝试在容器div（table_01），正文，单独的容器div（现在沮丧地删除）和各种其他东西上设置margin为0 auto。分开对齐：中心不起作用，我一直在唠叨，直到我的手指流血，但没有成功。整个页面的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;
}
其他样式表只是格式化滑块 - 我尝试取消链接，看看页面是否会居中对齐，但没有喜悦。有任何想法吗？如果需要，我会为其他样式表添加代码。
由于
奈
答案 0 :(得分：3)
需要更改以下规则：
#Table_01 {
position: relative;
width:1020px;
height:920px;
z-index:1;
margin:0 auto;
padding:0;
text-align:center;
}
答案 1 :(得分：1)
你的＃Table_01永远不会对齐中心，因为它的位置设置为绝对，左边和顶部为0.删除这些值将是一个开始......
答案 2 :(得分：0)
您需要删除每个position: absolute，left: *px和top:*px属性，然后调整width:的{{1}}。这是由一些发电机创造的？这段代码看起来很丑......