表格佈局和CSS

我無法弄清楚我的.css有什麼問題，因爲我的<table>沒有居中並保持左側。
我試過margin-left和margin-right設置爲auto沒有成功。
我錯過了我的表的<div>標記，我設置了一個id="content"嘗試居中但不起作用。表格佈局和CSS

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 &copy; 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; 
}

來源

2012-11-16 wizzme

你能過濾出只有什麼是必要的，所以我們不需要挖掘1000萬行代碼？ –

這裏有一個工作小提琴：http://jsfiddle.net/9RCZY/ 正如有人已經建議，您的CSS選擇器是錯誤的。 #table和＃table.center將不匹配您的表。＃選擇器將通過ID匹配某個元素。你的表沒有ID，但它有一個類，所以你的CSS選擇器應該是.center（或者table.center以獲得更多的特殊性）。 – HaukurHaf

在你的代碼中有這樣的

#table.center 
{ 
    position: relative; 
    margin: auto; 
    border-collapse: collapse; 
}

你需要將其更改爲這個

.center 
{ 
    position: relative; 
    margin: auto; 
    border-collapse: collapse; 
}

這是因爲＃引用了一個ID。在你的HTML代碼中你沒有和id表。

從彼得·萊萬多夫斯基建議繼，最好是由HTML代碼和CSS刪除不必要的IDS

來源

2012-11-16 23:48:05

謝謝你，是的，抱歉未使用的代碼..將在未來清理。 – wizzme

添加ID到你的表元素：

<table class="center" id="table">

#table選擇不能選擇元素

來源

2012-11-16 23:48:47

表格佈局和CSS

回答

相關問題