title: Spans and div elements won't center and margin-top/bottom won't work
body: <p>This is a problem that occurs a lot, and I usually do solve it in a variety of ways that don't work for another method. I was wondering if there was a universal method to center objects:</p>
  
  <pre><code>&lt;div&gt;
      &lt;span&gt;content&lt;/span&gt; 
      &lt;span&gt; content&lt;/span&gt;
      &lt;span&gt;content &lt;/span&gt;
      &lt;span&gt; content &lt;/span&gt;
      &lt;span&gt;content&lt;/span&gt;
      &lt;span&gt;content&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The methods I've tried are <code> margin-left:auto; margin-right:auto; </code> which doesn't seem to work with this. I've tried <code> margin-left:Xpx; </code>. One method that worked for a prior project was <code> display:inline-block </code> and <code> display:table-cell </code> but at other times those refuse to work. I tried applying those "fixes" to both the divs and spans.</p>
  
  <p>Another problem is that I can't seem to style the <code> margin-top</code> and <code>margin-bottom</code> in this instance at all. </p>
  
  <p>To shorten the post: I want to center the div and make the spans have a margin-top or bottom. What am I doing wrong and can someone explain the conceptual side to it? Thank you</p>