0

这是我关于 Stack Overflow 的第一个问题，但我已经从这个很棒的网站学到了我所知道的一切，所以我希望你能提供帮助......

我有一个非常简单的主页，它只是拒绝居中对齐。它基本上只是背景图像和中间带有 Wow Slider 图像滑块的奇怪文本（免费版）。我尝试在容器 div（table_01）、正文、单独的容器 div（现在因沮丧而删除）和其他各种东西上将边距设置为 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;
}

另一个样式表只是格式化滑块-我尝试取消链接以查看页面是否会居中对齐，但没有任何乐趣。有任何想法吗？如果您需要，我将添加其他样式表的代码。

谢谢

奈

4

3 回答 3

3

JS Bin 的工作演示。

需要更改以下规则：

#Table_01 {
    position: relative;
    width:1020px;
    height:920px;
    z-index:1;
    margin:0 auto;
    padding:0;
    text-align:center;
}
于 2013-02-10T18:35:31.053 回答
1

您的#Table_01 永远不会对齐中心，因为它的位置设置为绝对位置，左侧和顶部为 0。删除这些值将是一个开始......

于 2013-02-10T18:32:58.440 回答
0

您需要删除每个position: absolute,left: *px和top:*px属性，然后调整width:. #Table_01这是由某个生成器创建的吗？这段代码看起来很丑...

于 2013-02-10T18:35:47.893 回答