When and when doesn't "margin: auto" work?

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

How about changing inline-block to block?

No, it doesn’t work, even with margin: 0 auto

How about removing the table’s display property, then set the left and right margins to auto?

table {
  border: 1px solid red;
  border-collapse: separate;
  border-spacing: 0;
  color: #4a4a4d;
  font: 14px/1.4 "avenir";
  margin: 0 auto;
}
1 Like

Perfect!! Yeah, that I hadn’t thought of. I don’t know why I’d even set the display to inline-block in the first place.

Thanks.