gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 04:07:23 25 4
gpt4 key购买 nike

我是网络开发的新手,我正在尝试将整个 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>

下面是我附上的截图,因为你可以找到 flex 的盒子,它留给了页面,我希望那个 flex 的盒子和那个元素下面的元素居中。请任何人建议如何去做

enter image description here

最佳答案

#chart {
margin: 0 auto;
}

使用边距居中。

关于html - 无法将整个 div 移动到页面中心,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13328480/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com