Search code examples
htmlcsshtml-tablecenter

Centering table within div

I have two div id's each for a section that includes an h3 and a table. I want it center aligned, but I can't seem to get it to do this. I've tried a couple of things, but I think I might be doing it wrong.

This is my 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>

This is my 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;
}

Here is a picture to help... enter image description here

Solution

  • Set width: 100% on the container divs and margin: auto on the table elements within them, like so:

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

#inbound, #outbound {
    margin: auto;
}