0

これはスタック オーバーフローに関する私の最初の質問ですが、この素晴らしい Web サイトから知っていることはほとんどすべて学んだので、あなたが助けてくれることを願っています....

中央揃えを拒否する非常に単純なホームページがあります。基本的には、背景画像と、真ん中に 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 に答える