div中的居中表

對於包含h3和表的部分，我有兩個div id。我希望它中心一致，但我似乎無法讓它做到這一點。我已經嘗試了幾件事，但我認爲我可能做錯了。div中的居中表

這是我的HTML

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Metra Train Schedule</title> 
    <link href="styles.css" rel="stylesheet" type="text/css" /> 

    <!-- Attempt at adding favicon--> 
    <link rel="icon" type="image/x-icon" href="<a href="img/favicon.ico"></a> 

    </head> 

<body> 

<div id="header"><img src="img/Header.jpg" /></div> 

<div id="content"> 

<hgroup> 
    <h1>Metra Rails</h1> 
    <h2>District/North Line in Chicago</h2> 
</hgroup> 

<h3><a href="#inbound">Inbound Schedule</a></h3> 
<h3><a href="#outbound">Outbound Schedule</a></h3> 

<p> 
... <a href="http://metrarail.com/content/metra/en/home/utility_landing/riding_metra/riding_metra.html">here.</a> 
</p> 

<hr> 

<div id="inbounds"> 
<h3>Milwaukee District/North Line (Mayfair to Chicago)</h3> 
    <table id="inbound"> 
    <caption>Inbound Schedule: Sunday</caption> 
    <tbody> 
    ... 
    </tbody> 
     </table> 
    </div> 

<hr> 

<div id="outbounds"> 
<h3>Milwaukee District/North Line (Chicago to Mayfair)</h3> 
    <table id="outbound"> 
    <caption>Outbound Schedule: Sunday</caption> 
    <tbody>...</tbody> 
     </table> 
    </div> 


<div class="other"><h2>To see schedules for other days click <a href="http://metrarail.com/metra/en/home/maps_schedules/metra_system_map/md-n/schedule.full.html">here.</a></div> 
</div> 

</body> 
</html>

這是我的CSS

@charset "utf-8"; 
/* CSS Document */ 

body { 
    background:url(img/background_texture.jpg) no-repeat center center fixed; 
    background-size: cover; 
    color: white; 
} 

h1 { 
    margin: 0px; 
} 

#header { 
    width: 1020px; 
    padding: 0px; 
    margin: 0 auto; 
} 

#header img { 
    vertical-align: bottom; 
} 

#content { 
    background-image:url(img/ContentBox.png); 
    background-repeat: no-repeat; 
    background-position:center; 
    padding: 0 
    px; 
    width: 1020px; 
    margin: 0 auto; 
} 

table, td, th { 
    border: 1px solid white; 
    border-collapse: collapse; 
    padding: 4px; 
    text-align: center; 
} 

th { 
    font-size: 1.25em; 
    font-weight: bolder; 
} 

td { 
    font-weight: bold; 
} 

caption { 
    font-size: 2em; 
    font-weight: bold; 
} 

tr:nth-child(even) { 
    background-color:#d39a11 
} 

tr:nth-child(odd) { 
    background-color:#363c40 
} 

.stop { 
    text-align: right; 
} 

a:link { 
    color: #d39a11; 
} 

a:visited { 
    color:#7E6201; 
} 

a:hover { 
    color:#FB992D 
} 

a:active { 
    color: d39a11; 
} 

#inbounds, #outbounds { 
    text-align: center; 
}

這裏是一個圖片，以幫助... enter image description here

來源

2014-01-29 DiscipleDavid

'table {width：800px;保證金：0汽車; }' – mdesdev

設置width: 100%在div容器和margin: auto上其中的表格元素如下所示：

#inbounds, #outbounds { 
    width: 100%; 
} 

#inbound, #outbound { 
    margin: auto; 
}

來源

2014-01-29 02:55:45 EfrainReyes

你太棒了！謝謝，我一直在堅持這一點。我嘗試了margin auto，但我把它放在#inbounds上。任何想法爲什麼這不起作用？ – DiscipleDavid

也許是因爲'#inbounds'與'＃content'一樣寬（或者甚至更寬），因爲包含表？我真的不知道沒有自己測試它。順便說一句，如果我的回答幫助你解決了你的問題，你會介意將它作爲答案嗎？謝謝。 – EfrainReyes

謝謝。我確實標記了你的答案，它一開始就不讓我。我想有一個計時器。 – DiscipleDavid

div中的居中表

回答

相關問題