Question

我是网络开发的新手，我试图将整个div移动到页面的中心。但我无法做到这一点，也没有得到任何错误。下面是html页面的代码。

<!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附上截图，你可以找到弧形框，它留在页面上，我想要那个弯曲的盒子和下面的元素居中。任何人都可以建议怎么做

enter image description here

Answer 1

#chart {
  margin: 0 auto;
}

使用保证金来固定内容。

Answer 2

尝试

#chart {
  margin: 0 auto;
}

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

Answer 3

您已将该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％将保持div和宽度的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">

无法将整个div移动到页面的中心

3 个答案: