Hi all,
I’m a little confused with the margin: auto function in terms of when I can use it and when I can’t. Below is an example of a table embedded into a Section. It will left me use the command “margin-left: 20px” but it won’t let me use “margin: 0 auto” so that I can centre the table. I know I could just move the margin left further to get it roughly into the center, but I kind of want to understand why the “margin: auto” won’t work in this scenario.
I’ve attached a picture of what it currently looks like and the code I’m using:
HTML
<body>
<header>
<h1>Ulimate Frisbee Teams</h1>
<nav>
<a href="index-hw.html">Home</a>
<a href="history.html" class = "active">Teams</a>
<a href="history.html">History</a>
<a href="http://www.usaultimate.org/index.html" target="_blank">USA Ultimate</a>
</nav>
</header>
<main>
<aside class = "left">
<a href="https://commons.wikimedia.org/wiki/File%3AUltimate_Frisbee%2C_Jul_2009_-_17.jpg" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/commons/5/5d/Ultimate_Frisbee%2C_Jul_2009_-_19.jpg" alt="Creative Common Ultimate Photo" title="By Ed Yourdon [CC BY-SA 2.0 (http://creativecommons.org/licenses/by-sa/2.0)], via Wikimedia Commons"/> <p>What is Ultimate Frisbee?</p> </a>
<a href="https://commons.wikimedia.org/wiki/File%3AUltimate_Frisbee_Colorado_Cup_2005.jpg" target="_blank"><img alt="Ultimate Frisbee Colorado Cup 2005" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Ultimate_Frisbee_Colorado_Cup_2005.jpg/512px-Ultimate_Frisbee_Colorado_Cup_2005.jpg"/><p>Picture 2</p></a>
<a href="https://www.flickr.com/photos/paradisecoastie/15409853738/" title="Ultimate Frisbee" target="_blank"><img src="https://farm4.staticflickr.com/3948/15409853738_7dbfbfbac7_k.jpg" alt="Ultimate Frisbee"><p>Picture 3</p></a>
</aside>
<section class = "right">
<h2>College Teams</h2>
<p>This is not meant to be a comprehensive list of all the teams, just a sampling from around the United States. I focused on the ones that I though had cools names.</p>
<table>
<thead>
<tr>
<th>Team Name</th>
<th>Location</th>
<th>League Type</th>
</tr>
</thead>
<tr>
<td>Afterburn - Air Force</td>
<td>Colorado</td>
<td>Men's</td>
</tr>
<tr>
<td>Cold Front <span class="text-offset">Bates College</span></td>
<td>Maine</td>
<td>Women's</td>
</tr>
<tr>
<td>Disco Inferno <span class="text-offset">Brown University</span></td>
<td>Rhode Island</td>
<td>Women's</td>
</tr>
<tr>
<td>Bad Habit <span class="text-offset">Catholic University</span></td>
<td>Washington DC</td>
<td>Men's</td>
</tr>
<tr>
<td>Jive Turkeys <span class="text-offset">Dickinson College</span></td>
<td>Pennsylvania</td>
<td>Both</td>
</tr>
<tr>
<td>Knights of the Round Disc <span class="text-offset">Longwood College</span></td>
<td>Virginia</td>
<td>Men's</td>
</tr>
<tr>
<td>Ninjas <span class="text-offset">University of Minnesota</span></td>
<td>Minnesota</td>
<td>Women's</td>
</tr>
<tr>
<td>Flying Squirrels <span class="text-offset">Hendrix College</span></td>
<td>Arizona</td>
<td>Men's</td>
</tr>
<tr>
<td>Superfly <span class="text-offset">Yale</span></td>
<td>Connecticut</td>
<td>Men's</td>
</tr>
<tr>
<td>Flywheel <span class="text-offset">University of Michigan</span></td>
<td>Michigan</td>
<td>Women's</td>
</tr>
</table>
</section>
</main>
</body>
CSS
table {
border-collapse: separate;
border-spacing: 0;
color: #4a4a4d;
font: 14px/1.4 "avenir";
display: inline-block;
margin-left: 20px;
}
th {
text-shadow: 5px 5px 3px #000;
}
th,
td{
padding: 10px 65px;
}
td {
text-shadow: 1px 1px 3px #fff;
}
th {
background: linear-gradient(#49708f, #293f50);
color: #fff;
font: small-caps 14px arial;
text-align: left;
border-bottom: #008025 solid;
}
th:first-child {
border-top-left-radius: 5px;
}
th:last-child {
border-top-right-radius: 5px;
}
tr:nth-child(even) {
background: #92b6d5;
}
td {
border-bottom: 1px solid;
border-right: 1px solid ;
}
td:first-child {
font-weight: bold;
}
th:nth-child(-n+2){
border-right: 1px solid;
}
tr td:first-child {
border-left: 1px solid;
}
.text-offset{
font-size: 12px;
display: block;
font-weight: normal;
}