堆栈内存溢出
  简体   繁体   English

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

[英]Why won't my page center align?!

 原文  2013-02-10 18:21:33  2   3    html/ center-align

问题描述

This is my first question on Stack Overflow, but I've pretty much learnt everything I know from this great website so I'm hoping you'll be able to help.... 这是我关于堆栈溢出的第一个问题，但是我已经从这个出色的网站学到了我所知道的一切，因此希望您能够提供帮助。

I have a very simple homepage which simply refuses to center align. 我有一个非常简单的首页，只是拒绝居中对齐。 It's basically just background images and the odd bit of text with a Wow Slider image slider in the middle (free version). 它基本上只是背景图像和中间带有Wow Slider图像滑块的文本的奇数部分（免费版本）。 I've tried setting margin to 0 auto on a container div (table_01), body, a seperate container div (now deleted in frustration) and various other things. 我试过在容器div（table_01），主体，单独的容器div（现在由于挫败而删除）上将margin设置为0 auto，并且进行了其他操作。 Div-align:center won't work and I've twiddled about until my fingers bleed with no success. Div-align：center无法正常工作，我一直在扭动直到手指流血但没有成功。 The html for the whole page looks like this: 整个页面的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>

and the stylesheet is like this: 样式表是这样的： 

       @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;
}

The other stylesheet just formats the slider- I've tried unlinking it to see if the page will center align then but no joy. 另一个样式表只是设置滑块的格式-我尝试取消链接，以查看页面是否居中对齐，但是没有任何乐趣。 Any ideas? 有任何想法吗？ I'll add the code for the other stylesheet if you need it. 如果需要，我将添加其他样式表的代码。

Thanks 谢谢

Nye 奈

3 个解决方案

解决方案1
 3  2013-02-10 18:35:31

Working demo on JS Bin . JS Bin的工作演示 。

The following rule needs to be changed: 以下规则需要更改： 

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

解决方案2
 1  2013-02-10 18:32:58

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

解决方案3
 0  2013-02-10 18:35:47

You need to remove every position: absolute , left: *px and top:*px attributes, then adjust width: of #Table_01 . 您需要删除每个position: absolute ， left: *px和top:*px属性，然后调整#Table_01 width: #Table_01 Is this created by some generator?? 这是由某个发电机创建的吗？ This code looks very ugly... 这段代码看起来很丑...

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 我的导航栏无法与页面中心对齐吗？ - My navbar won't align with the center of the page? 为什么我的列表不能水平居中对齐 - Why won't my list align horizontally center 我的价值不会使文本居中对齐 - My Value won't text align center 为什么我的贝宝按钮不在页面中心 - Why won't my paypal button center in my page 为什么我的导航下拉菜单中心不在页面上？ - Why won't my nav drop down menu center on the page? 为什么我的html表不在IE 11中的页面中心？ - Why won't my html table center on the page in IE 11? 文字和图像不会在我的页面上居中 - Text and images won't center on my page 为什么此图像不在页面中心？ - Why won't this image center on the page? 为什么我的div不对齐？ - Why won't my divs align? 为什么我的按钮不能对齐？ - Why won't my buttons align?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM