0
这是我在堆栈溢出的第一个问题，但我已经很了解我从这个伟大的网站知道的一切，所以我希望你能帮助....为什么我的页面不能对齐？
我有一个非常简单主页，它只是拒绝中心对齐。它基本上只是背景图像和中间有一个Wow Slider图像滑块（免费版本）的文本的奇怪位。我已经尝试在容器div（table_01），body，一个单独的容器div（现在在挫败中被删除）以及其他各种各样的事情上将margin设置为0 auto。 Div-align：center不起作用，我一直在旋转，直到我的手指流血而没有成功。整个页面的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;
}
其他样式表只是格式我已经尝试取消链接它slider-，看是否页面将中心对齐，但没有喜悦。有任何想法吗？如果需要，我将添加其他样式表的代码。
感谢
奈
您需要将这个巨大的代码缩减到您的页面结构的一个最小示例，以清楚地显示问题。把它放在小提琴里。这是一个开始。 http://jsfiddle.net/wgpfT/ – isherwood 2013-02-10 18:31:27
此外，您拥有绝对定位元素的长列表似乎表明您的页面布局方法很糟糕。考虑使用网格系统。 – isherwood 2013-02-10 18:35:25