title: horizontal centering elements in div
body: <p>I am wondering how to center elements within a div but keep the text left aligned.</p>
  
  <p>Here is a jfiddle of what I have so far. I want the text to be in the middle of the div but to maintain its left justification.</p>
  
  <p><a href="http://jsfiddle.net/MgcDU/5994/" rel="nofollow">http://jsfiddle.net/MgcDU/5994/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="span4" id="middleFooter"&gt;
      &lt;div class="mcont" &gt; 
          &lt;div class="mrow"&gt; &lt;h5 class="tcell"&gt;&lt;b&gt;Useful Links&lt;/b&gt;&lt;/h5&gt; &lt;/div&gt;
          &lt;ul&gt;
              &lt;div class="mrow"&gt; &lt;li class="tcell"&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;&lt;/li&gt; &lt;/div&gt;
              &lt;div class="mrow"&gt; &lt;li class="tcell"&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;&lt;/li&gt; &lt;/div&gt;
              &lt;div class="mrow"&gt; &lt;li class="tcell"&gt;&lt;a href="#"&gt;Copyright Information&lt;/a&gt;&lt;/li&gt; &lt;/div&gt;
              &lt;div class="mrow"&gt; &lt;li class="tcell"&gt;&lt;a href="#"&gt;Terms &amp; Conditions&lt;/a&gt;&lt;/li&gt; &lt;/div&gt;
          &lt;/ul&gt; 
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#middleFooter {
      color: #ccc2a0;  
  }
  
  .mcont {
      background-color: blue;
  }
  
  .mrow li {
      background-color: red;
      margin-left: auto;
      margin-right: auto;
  }
  
  .mrow h5 {
      display: table-row; 
      background-color: yellow; 
  }
  
  .tcell {
      display: table-cell; 
  }   
  </code></pre>