2012-11-11 29 views
1

iam是web开发新手,iam尝试将整个div移动到页面中心。但iam无法做到这一点,也没有得到任何错误。 以下是html页面的代码。无法将整个div移动到页面的中心

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<style> 
#chart { 
width:500px; 
height:450px; 
background-color:white; 
-moz-border-radius: 20px; 
    -webkit-border-radius: 20px; 
    -khtml-border-radius: 20px; 
    border-radius: 20px; 
    behavior: url(PIE/PIE.htc); 
} 
</style> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<title>Here goes some tilte</title> 
<meta name="DESCRIPTION" content="Determine your ring size in different countries."> 
<meta name="KEYWORDS" 
content="ring, size, USA, american, german, french, british, japanese, swiss"> 
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> 
function changeValues(which) { 
    document.countries.D1.selectedIndex = which; 
    document.countries.D2.selectedIndex = which; 
    document.countries.D3.selectedIndex = which; 
    document.countries.D4.selectedIndex = which; 
    document.countries.D5.selectedIndex = which; 
    document.countries.D6.selectedIndex = which; 
    document.countries.D7.selectedIndex = which; 
    document.countries.D8.selectedIndex = which; 
    document.countries.D9.selectedIndex = which; 
} 
// --></script> 

<link href="/style.css" rel="stylesheet" type="text/css"> 
<link href="/print.css" rel="stylesheet" type="text/css" media="print"> 

<script language="JavaScript" src="/misc_functions.js" type="text/javascript"></script> 
</head> 
<body bgcolor="pink"> 
<div align="center" id="chart" > 
<center> 
<table border="0" cellpadding="10" cellspacing="0" width="450"> 
<tr> 
<td width="470" valign="top" class="content"> 
<div align="center"> 
<span class="red"><font color="Black"><h3>Here will be having a static data on the form<h3></font></span> 
</div> 
</td> 
</tr> 
</table> 
<!-- Place main data here --> 
<script language="JavaScript" src="/browser_detection.js" type="text/javascript"></script> 
<noscript> 
<blockquote> 
<p><font size="3" color="#FF0000"><b>You do not have JavaScript enabled.</b></font><br> 
<font size="2" color="#000080">The conversions on this site require the use of JavaScript so please enable before continuing. 
For assistance in enabling JavaScript, please contact the webmaster.</font></p> 
</blockquote> 
</noscript> 
    <form method="POST" name="countries"> 
<div align="center"> 
<table border="0" style="border: 1px solid rgb(255,0,0)"> 
    <tr> 
    <td align="center" bgcolor="#DFDFDF">USA </td> 
    <td align="center" bgcolor="#D5D5FF">INDIA</td> 
    <td align="center" bgcolor="#D5D5FF">PAKISTAN</td> 
    <td align="center" bgcolor="#D5D5FF">CHINA</td> 
    </tr> 
    <tr> 
    <td align="center" bgcolor="#DFDFDF"><select name="D1" size="1" 
    onChange="changeValues(document.countries.D1.selectedIndex);"> 
     <option>&nbsp;&nbsp;---</option> 
<option>Damodar</option> 
     </select></td> 
    <td align="center" bgcolor="#D5D5FF"><select name="D2" size="1" 
    onChange="changeValues(document.countries.D2.selectedIndex);"> 
     <option>&nbsp;&nbsp;---</option> 
     <option>Damodar</option> 
     </select></td> 
    <td align="center" bgcolor="#D5D5FF"><select name="D3" size="1" 
    onChange="changeValues(document.countries.D3.selectedIndex);"> 
     <option>&nbsp;&nbsp;---</option> 
     <option>Damodar</option> 
     </select></td> 
    <td align="center" bgcolor="#D5D5FF"><select name="D4" size="1" 
    onChange="changeValues(document.countries.D4.selectedIndex);"> 
     <option>&nbsp;&nbsp;---</option> 
     <option>Damodar</option> 
    </select></td> 
    </tr> 
</table> 
</div> 
<div align="center"> 
<table border="0" style="border: 1px solid rgb(255,0,0)"> 
    <tr> 
    <td align="center" bgcolor="#DFDFDF">British</td> 
    <td align="center" bgcolor="#DFDFDF">French</td> 
    <td align="center" bgcolor="#DFDFDF">German</td> 
    <td align="center" bgcolor="#DFDFDF">Japanese</td> 
    <td align="center" bgcolor="#DFDFDF">Swiss</td> 
    </tr> 
    <tr> 
    <td align="center" bgcolor="#DFDFDF"><select name="D5" size="1" 
    onChange="changeValues(document.countries.D5.selectedIndex);"> 
     <option>&nbsp;&nbsp;---</option> 
     <option>Damodar</option> 
    </select></td> 
    <td align="center" bgcolor="#DFDFDF"><select name="D6" size="1" 
    onChange="changeValues(document.countries.D6.selectedIndex);"> 
     <option>&nbsp;&nbsp;---</option> 
     <option>Damodar</option> 
    </select></td> 
    <td align="center" bgcolor="#DFDFDF"><select name="D7" size="1" 
    onChange="changeValues(document.countries.D7.selectedIndex);"> 
     <option>&nbsp;&nbsp;---</option> 
     <option>Damodar</option> 
     </select></td> 
    <td align="center" bgcolor="#DFDFDF"><select name="D8" size="1" 
    onChange="changeValues(document.countries.D8.selectedIndex);"> 
     <option>&nbsp;&nbsp;---</option> 
     <option>Damodar</option> 
     </select></td> 
    <td align="center" bgcolor="#DFDFDF"><select name="D9" size="1" 
    onChange="changeValues(document.countries.D9.selectedIndex);"> 
     <option>&nbsp;&nbsp;---</option> 
     <option>Damodar</option> 
    </select></td> 
    </tr> 
</table> 
     </div> 
     </center> 
    </form> 
    <table> 
    <tr> 
    <td> 
    <p align="center"><font color="#800000">Here will be having a static data on the form</font></p> 
    <p><font color="#000080"><big>Here will be having a static data on the form</big></font><ol> 
     <li><font color="#004080">Here will be having a static data on the form</font></li> 
     <li><font color="#004080">Here will be having a static data on the form</font></li> 
    </ol></p> 
    </td> 
    </tr> 
<table> 
</center> 
</div> 
</div> 
</body> 
</html> 

下面IAM连接的截图中,你可以找到curvedbox,这是留给页面,我想,曲线箱和根据该元素中心。 请任何人可以提出该怎么办呢

enter image description here

+0

'ALIGN = “中心”'和你的其他内嵌样式已过时的对齐方式。看看一些[基本的CSS](https://developer.mozilla.org/en-US/docs/CSS),并考虑分离风格和内容。 – bookcasey

+0

什么是所有的“IAM”而不是“我是”? – Sparky

回答

9
#chart { 
    margin: 0 auto; 
} 

使用边缘到中心的东西。

+0

我完全按照你的建议,但它不工作 – developer

+0

坦率地说,你对不推荐的内联样式('align:center'等)的使用会帮助你很困难。这是一个简单的[demo](http://jsfiddle.net/u4zEj/) - 从它学习。 '保证金:汽车'是你如何中心块。您需要深入了解代码 - 确保您的内联样式不覆盖任何内容 - 并将其应用于相关元素。 – bookcasey

+0

谢谢,当我删除内联样式,然后它的工作正常 – developer

1

尝试

#chart { 
    margin: 0 auto; 
} 

<div id="chart" > //remove align  
0

你已经把一个表内的div。所以你需要做一些事情。

<table border="0" cellpadding="10" cellspacing="0" width="450"> 
<tr> 
<td width="470" valign="top" class="content"> 
<div align="center"> 
<span class="red"><font color="Black"><h3>Here will be having a static data on the form<h3></font></span> 

变化与表100% 中心TD的持有股利和宽度为100%

<table border="0" cellpadding="10" cellspacing="0" width="100%"> 
<tr> 
<td width="100%" valign="top" class="content" style="text-align:center;"> 
<div align="center">