我无法弄清楚我的 .css 出了什么问题，因为我<table>的 .css 没有居中并保持在左侧。
我尝试了margin-left并margin-right设置为auto没有成功。
我是否缺少<div>表的标签，我设置了一个id="content"以尝试将其居中但不起作用。
HTML：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Assignment 5: Retouching Images</title>
<meta name="description" content="retouching images, photoshop">
<meta name="keywords" content="images, modify, photoshop">
<link href="css/rtouch.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<div id="header"> <img src="images/logoheader.jpg" alt="Armchair Bookstore Logo" width="975" height="230" class="floatcenter"> </div>
<!-- header section ends -->
<!-- menu section starts -->
<div id="menu">
<ul>
<li><a href="index.html" id="current" class="first">Home</a></li>
<li><a href="newrelease.html">New Releases</a></li>
<li><a href="placeholder.html">Special Selection</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="placeholder.html">On Sale</a></li>
</ul>
</div>
<!-- menu section ends -->
<div id="content">
<table class="center">
<caption>
Image Modification
</caption>
<tbody>
<tr>
<th>Original Image</th>
<th>Retouched Image</th>
<th>Specifications</th>
<th>Comments</th>
</tr>
<tr>
<td ><img src="images/wedding_org_thumb.jpg" alt="Original Wedding Photo Thumbnail" width="100" height="80" class="floatcenter"></td>
<td ><img src="images/wedding_rt_thumb.jpg" alt="Retouched Wedding Photo Thumbnail" width="100" height="80" class="floatcenter"></td>
<td>350 x 280 at 72 DPI</td>
<td>Blablablablabla</td>
</tr>
<tr>
<td ><img src="images/redeye_org_thumb.jpg" alt="Original Redeye Baby Photo Thumbnail" width="100" height="131" class="floatcenter"></td>
<td ><img src="images/redeye_rt_thumb.jpg" alt="Retouched Redeye Baby Photo Thumbnail" width="100" height="115" class="floatcenter"></td>
<td>350 x 280 at 72 DPI</td>
<td>Blablablablabla</td>
</tr>
<tr>
<td ><img src="images/balloons_org_thumb.jpg" alt="Original Balloon Photo Thumbnail" width="100" height="66" class="floatcenter"></td>
<td ><img src="images/balloons_rt_thumb.jpg" alt="Retouched Balloon Photo Thumbnail" width="100" height="83" class="floatcenter"></td>
<td>350 x 280 at 72 DPI</td>
<td>Blablablablabla</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="footer"> <br>
Copyright © 2012 JC Design. All Rights Reserved | 1.800.604.6305 </div>
</body>
</html>
这是.CSS
/*Body*/
html {background-color: #e2e2e2}
body
{
color: #000; background: #fff;
font-family: "Helvetica Neue",helvetica,arial, sans;
font-size: 90%;
text-align: left;
width: 975px;
margin-left: auto;
margin-right: auto;
}
fieldset
{
margin: 25px;
border-radius: 15px;
}
p {
margin-left: 25px;
margin-right: 30px;
text-align: left;
}
/*General link formatting*/
a:link
{
color: #f60; background: #fff;
}
a:visited
{
color: #f60;
}
a:hover
{
color: #00aed7;
text-decoration: none;
}
a:active
{
color: #000;
}
/*Page wrapper*/
#wrapper
{
margin: 0 auto;
width: 975px;
text-align: left;
}
/*Banner styles*/
#header {
width: 975px;
padding-left: 0px;
padding-bottom: 10px;
padding-top: 0px;
}
#footer
{ background-color: #04346c; color: #fff;
font-family: "Helvectica Neue,",helvetica, arial, sans;
font-size: 80%;
font-weight: normal;
text-align: center;
width: 955px;
padding-left: 20px;
padding-bottom: 10px;
padding-top: 5px;
}
/*---------------Navigation styles-------------------*/
#menu {
float: left;
margin:0;
padding-top: 0px;
width: 100%;
background: #04346c; color: #fff;
}
#menu ul {
margin: 0px;
position: relative
}
#menu ul li {
display: inline;
}
#menu ul li a {
float: left;
padding: 5px 16px;
margin-right: 0px;
background: #437DD4; color: #fff;
text-decoration: none;
border-right: 1px solid #e2e2e2;
}
#menu ul li a:hover {
color: #fff; background: #0f4da8;
text-decoration: underline;
}
#menu li a#current {
background: #6a94d4; color: #fff;
}
/*Navbar styles*/
#navcontainer
{
width: 975px;
background: #04346c; color: #fff;
padding: 5px 0;
font-weight: bold;
}
#navcontainer p
{
margin: 0;
padding: 6px;
text-align: center;
}
#navcontainer p a
{
padding: 4px 10px;
color: #fff; background: #04346c;
font-size: 120%;
}
#navcontainer p a:hover
{
background: #4284d3;
text-decoration: none;
}
#navcontainer p a#current
{
text-decoration: none;
padding: 4px 10px;
border: none;
}
/*Content styles*/
.floatright
{
float: right;
margin: 20px;
padding: 1px;
border: none;
}
.floatright2
{
float: right;
margin: 20px;
padding: 1px;
border: none;
}
/*Headings*/
legend
{
font-weight: bold;
font-size: 120%;
color: #224080;
margin-left: 20px;
}
h1
{
margin-left: 20px;
padding: 2px;
}
h2
{
margin-left: 25px;
font-size: 110%;
}
/*Table styles*/
#table
{
margin-left: 45px;
margin-right: 45px;
border-collapse: collapse;
}
#table.center
{
position: relative;
margin: auto;
border-collapse: collapse;
}
td, th
{
border-style: none;
border-width: thin;
border-color: #000;
padding: 15px;
border-collapse: collapse;
}
caption
{
width: auto;
font-size: 1.2em;
padding: 10px;
font-weight: bold;
color: #f60;
margin-left: 20px;
}
#content {
margin-left: auto;
margin-right: auto;
}