请帮助cant中心div,需要帮助

时间:2013-03-15 16:19:37

标签: css html center

我已经使用切片从photoshop设计导出div标签到dreamweaver,从头部提取css并创建样式表。页面中的所有div标签都为每个标签设置了绝对位置。我已经尝试了所有我能想到的东西来集中页面上的所有内容,但没有任何工作。有人可以看看代码并告诉我我错过了什么。

<HTML>


<html>

<head>

<title>Packet Access</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link href="css/style_sheet.css" rel="stylesheet" type="text/css" />


</head>
<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; 
margin-left: 0px; margin-right: 0px`enter code here`;">
<div id="Table_01">
<div id="topper">
</div>
<div id="Topper-2">
</div>
<div id="search">
    <img src="images/search.png" width="133" height="19" alt="">
</div>
<div id="topper-side2"></div>
<div id="topper-side"></div>
<div id="Logo">
    <img src="images/Logo.png" width="254" height="37" alt="">
</div>
<div id="side-logo-right"></div>
<div id="under-search"></div>
<div id="index-09"></div>
<div id="navigation">
    <img src="images/navigation.png" width="457" height="20" alt="">
</div>
<div id="under-logo"></div>
<div id="under-navigation"></div>
<div id="divider">
    <img src="images/divider.jpg" width="1024" height="3" alt="">
</div>
<div id="bg-left">
    <img src="images/bg_left.jpg" width="131" height="147" alt="">
</div>
<div id="index-15">
    <img src="images/index_15.png" width="764" height="52" alt="">
</div>
<div id="bg-right">
    <img src="images/bg_right.jpg" width="129" height="147" alt="">
</div>
<div id="index-17">
    <img src="images/index_17.jpg" width="764" height="243" alt="">
</div>
<div id="index-18">
    <img src="images/index_18.jpg" width="130" height="519" alt="">
</div>
<div id="index-19">
    <img src="images/index_19.jpg" width="1" height="148" alt="">
</div>
<div id="index-20">
    <img src="images/index_20.jpg" width="1" height="148" alt="">
</div>
<div id="index-21">
    <img src="images/index_21.jpg" width="128" height="519" alt="">
</div>
<div id="index-22">
    <img src="images/index_22.png" width="766" height="43" alt="">
</div>
<div id="index-23">
    <img src="images/index_23.png" width="12" height="1" alt="">
</div>
<div id="OTT-box">
    <img src="images/OTT_box.jpg" width="242" height="99" alt="">
</div>
<div id="index-25">
    <img src="images/index_25.png" width="9" height="1" alt="">
</div>
<div id="XFP">
    <img src="images/XFP.jpg" width="242" height="99" alt="">
</div>
<div id="index-27">
    <img src="images/index_27.png" width="10" height="1" alt="">
</div>
<div id="Cache">
    <img src="images/Cache.jpg" width="242" height="99" alt="">
</div>
<div id="index-29">
    <img src="images/index_29.png" width="9" height="1" alt="">
</div>
<div id="index-30">
    <img src="images/index_30.jpg" width="12" height="327" alt="">
</div>
<div id="index-31">
    <img src="images/index_31.jpg" width="9" height="327" alt="">
</div>
<div id="index-32">
    <img src="images/index_32.jpg" width="10" height="327" alt="">
</div>
<div id="index-33">
    <img src="images/index_33.jpg" width="9" height="327" alt="">
</div>
<div id="index-34">
    <img src="images/index_34.png" width="242" height="81" alt="">
</div>
<div id="index-35">
    <img src="images/index_35.png" width="242" height="81" alt="">
</div>
<div id="index-36">
    <img src="images/index_36.png" width="242" height="81" alt="">
</div>
<div id="index-37">
    <img src="images/index_37.jpg" width="242" height="148" alt="">
</div>
<div id="index-38">
    <img src="images/index_38.jpg" width="242" height="148" alt="">
</div>
<div id="index-39">
    <img src="images/index_39.jpg" width="242" height="148" alt="">
</div>
<div id="footer">Copyright © 2012 Packet Access</div>
</div>
<!-- End Save for Web Slices -->
</body>
</html>



<!--The CSS is below-->

<CSS>


@charset "utf-8";


*{  
   margin:0;  
   padding:0;  

}  




.body {
background-color: #000;
text-align:center; /*For IE6 Shenanigans*/

}


#Table_01 {
margin: 0 auto;
text-align: center;
width: 1024px;

}


#topper {
position:absolute;
left:0px;
top:0px;
width:1024px;
height:10px;
background-color:#000000;

}


#Topper-2 {
position:absolute;
left:0px;
top:10px;
width:763px;
height:6px;
background-color:#000000;

}


#search {
position:absolute;
left:763px;
top:10px;
width:133px;
height:19px;
background-color:#000000;

}


#topper-side2 {
position:absolute;
left:896px;
top:10px;
width:128px;
height:59px;
background-color:#000000;

}


#topper-side {
position:absolute;
left:0px;
top:16px;
width:130px;
height:53px;
background-color:#000000;

}


#Logo {
position:absolute;
left:130px;
top:16px;
width:254px;
height:37px;

}


#side-logo-right {
position:absolute;
left:384px;
top:16px;
width:379px;
height:26px;
background-color:#000000;

}


#under-search {
position:absolute;
left:763px;
top:29px;
width:133px;
height:13px;
background-color:#000000;

}


#index-09 {
position: absolute;
left: 384px;
top: 42px;
width: 55px;
height: 27px;
background-color: #000;

}


#navigation {
position:absolute;
left:439px;
top:42px;
width:457px;
height:20px;
background-color:#000000;

}


#under-logo {
position:absolute;
left:130px;
top:53px;
width:254px;
height:16px;
background-color:#000000;

}


#under-navigation {
position:absolute;
left:439px;
top:62px;
width:457px;
height:7px;
background-color:#000000;

}


#divider {
position:absolute;
left:0px;
top:69px;
width:1024px;
height:3px;
background-color:#000000;

}



#bg-left {
position:absolute;
left:0px;
top:72px;
width:131px;
height:147px;

}


#index-15 {
position:absolute;
left:131px;
top:72px;
width:764px;
height:52px;

}


#bg-right {
position:absolute;
left:895px;
top:72px;
width:129px;
height:147px;

}


#index-17 {
position:absolute;
left:131px;
top:124px;
width:764px;
height:243px;

}


#index-18 {
position:absolute;
left:0px;
top:219px;
width:130px;
height:519px;

}


#index-19 {
position:absolute;
left:130px;
top:219px;
width:1px;
height:148px;

}


#index-20 {
position:absolute;
left:895px;
top:219px;
width:1px;
height:148px;

}


#index-21 {
position:absolute;
left:896px;
top:219px;
width:128px;
height:519px;

}


#index-22 {
position:absolute;
left:130px;
top:367px;
width:766px;
height:43px;

}


#index-23 {
position:absolute;
left:130px;
top:410px;
width:12px;
height:1px;

}


#OTT-box {
position:absolute;
left:142px;
top:410px;
width:242px;
height:99px;

}


#index-25 {
position:absolute;
left:384px;
top:410px;
width:9px;
height:1px;

}


#XFP {
position:absolute;
left:393px;
top:410px;
width:242px;
height:99px;

}


#index-27 {
position:absolute;
left:635px;
top:410px;
width:10px;
height:1px;

}


#Cache {
position:absolute;
left:645px;
top:410px;
width:242px;
height:99px;

}


#index-29 {
position:absolute;
left:887px;
top:410px;
width:9px;
height:1px;

}


#index-30 {
position:absolute;
left:130px;
top:411px;
width:12px;
height:327px;

}


#index-31 {
position:absolute;
left:384px;
top:411px;
width:9px;
height:327px;

}


#index-32 {
position:absolute;
left:635px;
top:411px;
width:10px;
height:327px;

}


#index-33 {
position:absolute;
left:887px;
top:411px;
width:9px;
height:327px;

}


#index-34 {
position:absolute;
left:142px;
top:509px;
width:242px;
height:81px;

}


#index-35 {
position:absolute;
left:393px;
top:509px;
width:242px;
height:81px;

}


#index-36 {
position:absolute;
left:645px;
top:509px;
width:242px;
height:81px;

}


#index-37 {
position:absolute;
left:142px;
top:590px;
width:242px;
height:148px;




#index-38 {
position:absolute;
left:393px;
top:590px;
width:242px;
height:148px;

}


#index-39 {
position:absolute;
left:645px;
top:590px;
width:242px;
height:148px;

}


#footer {
position: absolute;
left: 0px;
top: 738px;
width: 100%;
height: 21px;
background-color: #000000;
font-family: "Helvetica LT Std";
font-size: 14px;
color: #999;
text-decoration: none;
text-align: center;
padding-top: 3px;
padding-bottom: 2px;

}



</style>

1 个答案:

答案 0 :(得分:0)

要回答如何将所有内容置于页面中心的直接问题,请从{<1}}更改:

#Table_01

为:

#Table_01 {
margin: 0 auto;
text-align: center;
width: 1024px;
}