为什么我的页面中心不对齐？！

【问题标题】：Why won't my page center align?!为什么我的页面中心不对齐？！
【发布时间】：2013-02-11 02:35:47
【问题描述】：

这是我在 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;
}

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

谢谢

奈

【问题讨论】：

  • 您需要将这个巨大的代码块精简为可以清楚地显示问题的页面结构的最小示例。把它放在一个小提琴中。这是一个开始。 jsfiddle.net/wgpfT
  • 此外，您拥有一长串绝对定位元素的事实似乎表明您的页面布局方法很糟糕。考虑改用网格系统。

标签： html center-align


【解决方案1】：

Working demo on JS Bin.

以下规则需要更改：

#Table_01 {
    position: relative;
    width:1020px;
    height:920px;
    z-index:1;
    margin:0 auto;
    padding:0;
    text-align:center;
}

【讨论】：

  • 工作就像一个魅力，非常感谢！我喜欢stackoverflow：D
【解决方案2】：

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

【讨论】：

    【解决方案3】：

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

    【讨论】：

      猜你喜欢
      • 2016-03-21
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-01-27
      • 1970-01-01
      • 2020-03-25
      • 2012-12-31
      • 2019-10-14
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode